盒子的变大变小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子变大变小</title>
<style type="text/css">
.box{
width: 50px; height: 50px; background: #eee; margin: 0; auto;
}
</style>
</head>
<body>
<div id="box" class="box">
</div>
<script type="text/javascript">
var box = document.getElementById('box');
var i = 0; // 保存用户单击盒子的次数
box.onclick = function(){ //处理盒子的单击事件
++i;
if (i % 2) { //单击次数为奇数变大
this.style.width = '200px';
this.style.height = '200px';
this.innerHTML = '大';
} else{ //单击次数为偶数变小
this.style.width = '50px';
this.style.height = '50px';
this.innerHTML = '小';
}
}
</script>
</body>
</html>
