js实现盒子大小的改变。单击次数为奇数时,盒子变大,盒子内文字为“大”,单击次数为偶数时,盒子变小,盒子内文字为“小”。
时间: 2024-02-26 18:59:04 浏览: 114
TextBox的宽度随输入的文本的大小而改变的js代码
可以通过JavaScript来实现盒子大小的改变。以下是实现方式的代码示例:
```html
<div id="box" onclick="changeSize()">小</div>
<script>
var count = 0;
function changeSize() {
var box = document.getElementById("box");
count++;
if (count % 2 == 1) {
// 单击次数为奇数,盒子变大
box.style.width = "200px";
box.style.height = "200px";
box.innerHTML = "大";
} else {
// 单击次数为偶数,盒子变小
box.style.width = "100px";
box.style.height = "100px";
box.innerHTML = "小";
}
}
</script>
```
在这段代码中,我们使用了一个全局变量`count`来记录单击次数。每次单击时,我们都会将`count`加1,并判断它的值是否为奇数。如果是奇数,就将盒子的宽高设置为200px,文字设置为“大”;如果是偶数,就将盒子的宽高设置为100px,文字设置为“小”。这样就能实现盒子大小的改变了。
阅读全文