HTML5的计时器设置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计时器</title>
<style type="text/css">
#box {
width: 300px;
height: 200px;
background: lightblue;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
//获取元素
var oBox = document.getElementById("box");
var num = 300;
var timer = null;
//var count = true;
//设置计时器的写法
timer = setInterval(function() { //每过一秒钟执行一次
//alert("hello");弹出hello；
//宽度每秒加50
num += 25;
box.style.width = num + "px";
// //每过一秒，变颜色
// if (count == true) {
// box.style.background = "green";
// count = false;
// } else {
// box.style.background = "pink";
// count = true;
//
// }
//如果宽度大于500的时候停止；
if (num > 500) {
//清除计时器
clearInterval(timer);
}
if (num % 4 == 0) {
oBox.style.background = "pink";
}
if (num % 4 == 1) {
oBox.style.background = "green";
}
if (num % 4 == 2) {
oBox.style.background = "red";
} else {
oBox.style.background = "blue";
}
}, 1000); //1000指示1000毫秒
</script>
</body>
</html>
