大家好，欢迎来到IT知识分享网。
什么是定时器？
定时器就是可以定时一段时间后执行某些功能，或者每隔一段时间重复执行某些功能。
定时器和循环的区别要尤其注意，循环结构内部使用延时函数也可以实现定时器的重复执行效果，但是如果使用循环加延时，程序是阻塞的，会一直停留在循环过程中，循环结构后面的程序无法执行。即计算机资源一直处于被占用状态，消耗也很大。
定时器是只在触发的时刻执行指定功能，没有到触发时刻程序不会阻塞，按照顺序，正常执行定时器后面的程序。
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>视频讲解
视频加载中…
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/98003.html
