「这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战」。
【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，就安排上！
感谢
万能的网络
公众号-归子莫，小程序-小归博客