在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。称之为计时事件。
setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
clearInterval() - 用于停止 setInterval() 方法执行的函数代码。
setTimeout() - 在指定的毫秒数后执行指定代码。
clearTimeout() - 用于停止setTimeout()方法执行的函数代码，会清除setTimeout()占用的内存空间。
注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。
一次性定时器
案例：一闪一闪亮晶晶
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 400px;
height: 400px;
position: relative;
background-color: #000;
border: 2px solid red;
}
span{
color: yellow;
font-size: 26px;
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
setInterval(function () {
var box=document.getElementById("box");
box.innerHTML="<span>★</span>";
var x=parseInt(Math.random()*400);
var y=parseInt(Math.random()*400);
box.firstElementChild.style.left=x+"px";
box.firstElementChild.style.top=y+"px";
},10);
</script>
</body>
</html>
案例：一起摇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
position:absolute;
}
img{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<input type="button" value="摇起来" id="btn1">
<input type="button" value="停止" id="btn2">
<div id="box">
<img src="1.jpg" alt="">
<img src="2.jpg" alt="">
</div>
<script>
var timeId="";
document.getElementById("btn1").onclick=function () {
timeId=setInterval(function(){
var x=parseInt(Math.random()*100+1);
var y=parseInt(Math.random()*100+1);
var box=document.getElementById("box");
box.style.left=x+"px";
box.style.top=y+"px";
},100);
};
document.getElementById("btn2").onclick=function () {
clearInterval(timeId);
}
</script>
</body>
</html>
案例：协议按钮禁用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<textarea name="" id="" cols="30" rows="10">
请仔细阅读本协议，然后才能注册账号，登陆。
</textarea>
<br/>
<input type="button" value="请仔细阅读协议(5)" id="btn" disabled="disabled">
<script>
var time=5;
var timeId=setInterval(function() {
var btn=document.getElementById("btn");
time--;
btn.value="请仔细阅读协议("+time+")";
if(time<=0){
clearInterval(timeId);
btn.value="同意";
btn.disabled=false;
}
},1000);
</script>
</body>
</html>
案例：div背景颜色渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 200px;
height: 200px;
background-color: orangered;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="btn">渐变</button>
<script>
document.getElementById("btn").onclick=function () {
var box=document.getElementById("box");
var opacity=10;
var timeId=setInterval(function () {
opacity--;
if(opacity<=0){
clearInterval(timeId);
}
box.style.opacity=opacity/10;
},200);
};
</script>
</body>
</html>
案例：盒子逐渐变大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 200px;
height: 200px;
background-color: orangered;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="btn">渐变</button>
<script>
document.getElementById("btn").onclick=function () {
var box=document.getElementById("box");
var opacity=10;
var timeId=setInterval(function () {
opacity--;
if(opacity<=0){
clearInterval(timeId);
}
box.style.opacity=opacity/10;
},200);
};
</script>
</body>
</html>