setInterval定时器小练习

设置定时器:var timer = setInterval( 函数, 毫秒 )      //重复执行

取消定时器:clearInterval( timer );                            //终止

下面做了一个小练习:通过点击按钮来达到自动循环更改浏览器背景颜色的实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<input type="button" value="换背景"/>
<input type="button" value="stop!"/>
<script type="text/javascript">
	var aBtn = document.getElementsByTagName('input');
	var arrB = ['red','black','blue','green'];
	var i = 0;
	var timer = null;
	aBtn[0].onclick = function(){             //开始按钮
		clearInterval(timer);             //这里开始需要清空一次,防止连续多次点击造成开启多个定时器的bug
		timer = setInterval(function(){
			document.body.style.background = arrB[i];
			i++;
			i = i%arrB.length;         //运用取模建立循环
		},100);
	}
	aBtn[1].onclick = function(){              //停止按钮
		clearInterval(timer);              //清空定时器
	}
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_42565663/article/details/81000664