什么是定时器？
定时器就是可以定时一段时间后执行某些功能，或者每隔一段时间重复执行某些功能。
定时器和循环的区别要尤其注意，循环结构内部使用延时函数也可以实现定时器的重复执行效果，但是如果使用循环加延时，程序是阻塞的，会一直停留在循环过程中，循环结构后面的程序无法执行。即计算机资源一直处于被占用状态，消耗也很大。
定时器是只在触发的时刻执行指定功能，没有到触发时刻程序不会阻塞，按照顺序，正常执行定时器后面的程序。
setTimeout()
语法：
setTimeout(func,millisec)
|
参数 |
描述 |
|
func |
要调用的函数后要执行的 JavaScript 代码串。 |
|
millisec |
在执行代码前需等待的毫秒数。 |
功能：在指定的毫秒数后调用函数。
setTimeout(function(){
alert("start");
}, 3000);
setInterval()
语法：
setInterval(func,millisec)
|
参数 |
描述 |
|
func |
要调用的函数后要执行的 JavaScript 代码串。 |
|
millisec |
周期性执行func的时间间隔，以毫秒计。 |
功能：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
setInterval(function(){
console.log("hioier.com");
}, 1000);
简易计时器项目
实现一个计时器，绿色方框内数字从0开始，每隔1s增加1。
<style>
#d1{
width:200px;
height:200px;
color:white;
font-size:100px;
background:green;
text-align:center;
line-height:200px;
}
</style>
<body>
<div id="d1">0</div>
<script>
let d1 = document.getElementById("d1");
let n = 0;
setInterval(function(){
d1.innerHTML = n++;
}, 1000);
</script>
</body>
跳跃坠落两张图片循环切换
例如：两张图片的名字分别为11.jpg和12.jpg，只需设置一个变量在11和12之间切换即可。
<style>
#d1 {
width: 500px;
height: 400px;
}
</style>
<body>
<img id="d1" src="images/11.jpg"/>
<script>
let d1 = document.getElementById("d1");
let n = 11;
setInterval(function(){
n++;
if(n > 12)
n = 11;
d1.src = `images/${n}.jpg`;
}, 500);
</script>
</body>
停止定时器，按下停止跳跃按钮，停止跳跃。
<body>
<img id="d1" src="images/11.jpg"/>
<button id="btn_stop">停止跳跃</button>
<script>
let d1 = document.getElementById("d1");
let btn_stop = document.getElementById("btn_stop");
let n = 11;
let timer = setInterval(function(){
n++;
if(n > 12)
n = 11;
d1.src = `images/${n}.jpg`;
}, 500);
btn_stop.onclick = function(){
clearInterval(timer);
}
</script>
</body>
拆除*弹炸**
*弹炸**倒计时10s，如果没有拆除就会爆炸，现在请你点击按钮拆除*弹炸**。
<style>
#d1 {
text-align: center;
}
#d3 {
width: 100px;
height: 100px;
color: white;
font-size: 50px;
background: green;
text-align: center;
line-height: 100px;
margin: 0 auto;
}
</style>
<div id="d1">
<button id="btn">
开始拆弹
</button>
<div id="d2">
<img src="images/7.gif"/>
<div>
<div id="d3">
10
</div>
</div>
</div>
</div>
<script>
let d3 = document.getElementById("d3");
let btn = document.getElementById("btn");
let n = 10;
let timer = setInterval(function(){
d3.innerHTML = n--;
if(n < 0){
alert("BOOM!");
n = 10;
}
}, 1000);
btn.onclick = function(){
clearInterval(timer);
alert("拆弹成功！");
}
</script>
视频讲解
视频加载中...