【JavaScript定时器小案例】常见的几种定时器实现的案例
博客阐明
文章所波及的材料来自互联网整顿和集体总结，意在于集体学习和教训汇总，如有什么中央侵权，请分割自己删除，谢谢！
阐明
在日常开发中定时器的应用还是挺多的，这里介绍几种比拟常见的。
案例一：手机验证码倒计时
代码
<!DOCTYPE html><html><body> <input type="button" value="获取验证码" onclick="settime(this)" /> <script> // 发送验证码 var countdown = 60; function settime(obj) { if (countdown === 0) { obj.removeAttribute("disabled"); obj.value="获取验证码"; countdown = 60; return; } else { obj.setAttribute("disabled", true); obj.value = "从新发送(" + countdown + ")"; countdown--; } setTimeout(function() { settime(obj) },1000) } </script></body></html>成果
代码解析
应用setTimeout来模仿倒计时的成果，这其中有小许误差，不过能够在可承受的范畴内。
案例二：日历时钟
代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>繁难时钟</title> <style> .time{ width: 300px; height: 60px; margin:0px auto; line-height: 60px; text-align: center; color: red; background-color: yellow; } </style></head><body> <div id="time" class="time"></div></body><script> setInterval(function(){ var d = new Date(); var time = document.getElementById('time'); //获取以后区域工夫并转成字符串 time.innerHTML = d.toLocaleString(); },1000);</script></html>成果
代码解析
利用setInterval每距离1秒获取一次以后工夫
案例三：抽奖
代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>抽奖</title></head><body> <input type="button" value="开始" onclick="start()" /> <input type="button" value="完结" onclick="end()" /></body><div id="num_text"></div><script> var i = 1; var t = Object; function setNum() { var res = document.getElementById('num_text') res.innerHTML = i; res.style.fontSize = '200px' i++; // 超过100重置 if(i === 100){ i = 1; } } function start() { t = setInterval(setNum, 10) } function end() { t = clearInterval(t) }</script></html>成果
代码解析
先让一个数开始疾速循环，通过应用setInterval实现，当点击完结时，调用clearInterval革除定时器，达到定格的成果，具体循环内能够换成奖品数组或者其余的数据，也可能达到此类成果。
总结
选了三个比拟有代表性的案例，pym也能够通过以上三个简略的案例裁减起来，达到锤炼JS的定时器的成果。比方日历时钟的那个，能够做成一个表盘，让时分秒进行转动。
如果点赞有50，就安顿上！
感激
万能的网络
以及勤奋的本人，集体博客，GitHub测试，GitHub
公众号-归子莫，小程序-小归博客