1. 设置定时器
语法:setInterval(函数,时间)
注意:
函数书写时不能带括号
setInterval(fn,1000)//正确
setInterval(fn(),1000)//错误
//时间的最小设置不小于14ms
2. 清除定时器
语法:clearInterval(所清除的定时器名称)
3. 点击更换颜色案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#prizeDraw {
width: 100px;
height: 100px;
background: rgba(255, 68, 253, 0.5);
font-size: 30px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="prizeDraw"></div>
<input type="button" value="开始" id="start">
<input type="button" value="暂停" id="stop">
<script>
window.onload = function() {
var timer = null;
var num = 0;
var i = 0;
var arr = ['red', '#FF9D0C', '#DBFF0D', '#3BFF0D', '#0DFFA2', '#0DE8FF', '#0D52FF', '#210DFF', '#930DFF', '#FF0DB4']
var start = document.getElementById('start');
var stop = document.getElementById('stop');
var prizeDraw = document.getElementById('prizeDraw');
start.onclick = function() {
clearInterval(timer);
timer = setInterval(function() {
num = Math.floor(Math.random() * 100 + 1);
prizeDraw.style.backgroundColor = arr[i];
i++;
if (i == 9) {
i = 0;
};
prizeDraw.innerHTML = num;
}, 100);
}
stop.onclick = function() {
clearInterval(timer);
}
}
</script>
</body>
</html>