JavaScript 计时器
B站关联视频教程：https://www.bilibili.com/video/BV1RA41137yd?p=15
目录：
一、计时器setInterval()、setTimeout() 、clearInterval()
1、指定时间之后执行代码。setTimeout(动作,时间)
2、每隔指定的时间就执行一次代码。setInterval(动作,时间)
3、取消由 setInterval() 设定的定时操作。clearInterval(id) 方法
时间单位是毫秒，1秒=1000毫秒
二、案例一：结合倒计时，使用setInterval实现时间自动更新
内容：
一、计时器setInterval()、setTimeout() 、clearInterval()
JavaScript是单线程语言，但是它可以通过设置超时值和间歇时间值来指定代码在特定的时刻执行。
超时值是指在指定时间之后执行代码，setTimeout(动作,时间)
间歇时间值是指每隔指定的时间就执行一次代码。setInterval(动作,时间)
时间单位是毫秒，1秒=1000毫秒
1、指定时间之后执行代码。setTimeout(动作,时间)
<script>
function startCount(){
document.write(666);
}
setTimeout(startCount,1000); //1s后执行
</script><script>
sum=0;
function startCount(){
sum++;
document.write(sum);
}
setInterval("startCount()",1000);//加上""后，必须加()
//setInterval(startCount,1000); //这样也可以的。1s后执行，后间隔1s再执行
</script>setTimeout也可以实现不间歇的动作【但是不推荐这样用】
<script>
sum=0;
function startCount(){
sum++;
document.write(sum);
setTimeout(startCount,1000);
}
setTimeout(startCount,1000);
</script>我们也可以把值定义到指定的节点中显示。
JS核心：document.getElementById("id名称").innerHTML=值;
演示一：
<div id="showdjs"></div>
<script>
document.getElementById("showdjs").innerHTML=6;
</script>演示二：
<div id="showdjs"></div>
<script>
sum=0;
function startCount(){
sum++;
// document.write(sum);
document.getElementById("showdjs").innerHTML=sum;
}
setInterval("startCount()",1000);//加上""后，必须加()
//setInterval(startCount,1000); //这样也可以的。1s后执行，后间隔1s再执行
</script>3、取消由 setInterval() 设定的定时操作。clearInterval(id) 方法
clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
注意: 要使用 clearInterval() 方法, 在创建执行定时操作时要使用全局变量。
<div id="showdjs"></div>
<script>
sum=0;
function startCount(){
sum++;
// document.write(sum);
document.getElementById("showdjs").innerHTML=sum;
}
var showid=setInterval("startCount()",1000);//加上""后，必须加()
//setInterval(startCount,1000); //这样也可以的。1s后执行，后间隔1s再执行
function tingzhi(){
alert("注意了，触发了停止");
clearInterval(showid);//showid是上面setInterval返回的变量
}
</script>
<button onclick="tingzhi();">停止变化</button>二、案例一：结合倒计时，使用setInterval实现时间自动更新：
知识点：
1、倒计时；
2、倒计时封装到自定义函数中；
3、计时器指定间隔时间（1秒）调用函数，给html指定元素（id="showdate"）赋值。
<div id="showdate"></div>
<script>
function setDaoJiShi(){
var mydate=new Date();
a=mydate.getTime();
b=new Date("2028-05-11 11:55:32").getTime();
//console.log(b);
c=b-a;//c单位是毫秒
//console.log(c);
d=c/1000/(60*60*24);
tian=Math.floor(d);
xiaoshi=Math.floor((c-tian*24*60*60*1000)/1000/(60*60));
//console.log(xiaoshi);
fenzhong=Math.floor((c-tian*24*60*60*1000-xiaoshi*60*60*1000)/1000/60);
//console.log(fenzhong);
miao=Math.floor((c-tian*24*60*60*1000-xiaoshi*60*60*1000-fenzhong*60*1000)/1000);
var shijian=tian+"天"+xiaoshi+"小时"+fenzhong+"分钟"+miao+"秒";
//console.log(shijian);
document.getElementById('showdate').innerHTML=shijian;
}
setDaoJiShi();
setInterval(setDaoJiShi,1000);
</script>知识点：
1、界面的定义(html,css)：标题，展示结果框，按钮；
2、生成4位随机数作为抽奖数字（自定义creatnum函数）；
3、给按钮绑定js点击动作事件（自定义begin_end_num函数）；
4、begin_end_num函数的开始抽奖功能；
5、begin_end_num函数的停止抽奖功能；
提示：
a)随机值：Math.random()
b)间隔指定时间调用函数：setInterval()
c)取消由 setInterval() 设定的定时操作：clearInterval()
d)同一元素绑定不同的事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js数字随机滚动抽奖特效</title>
</head>
<body>
<style type="text/css">
body{
background-color:#fff;
text-align:center;
padding-top:50px;
}
/*抽奖展示边框*/
#result{border:3px solid #40AA53;margin:0 auto;text-align:center;width:200px;padding:10px 0;background:#efe;}
/*抽奖数字*/
#shownum{font-size:50pt;font-family:Verdana}
/*开始与停止按钮定义*/
#button{margin:50px 0 0 0;}
#button input{font-size:40px;padding:0 50px;}
#btn{
background-color:#40AA53;
border:1px solid #40AA53;
width:200px;
height:60px;
margin:0em auto;
font-size:20px;
border-radius:2.5px;
color:#FFF;
}
</style>
<!--标题展示-->
<h1 style="color:#40AA53">抽奖结果</h1>
<!--展示抽奖数字-->
<div id="result" style="color:#40AA53">
<span id="shownum">0</span>
</div>
<!--开始与停止按钮-->
<div id="button">
<input type='button' id="btn" value='停止' onclick='begin_end_num(this)'/>
</div>
</body>
</html>
<script>
//创建数字
function creatnum(){
t=Math.random();//0.0 ~ 1.0 之间的一个伪随机数。
t2=Math.floor(t*(9999-1000)+1000);
document.getElementById("shownum").innerHTML=t2;
}
//sj=setInterval("creatnum()",50);
sj=setInterval(creatnum,50);
a=0;
//开始与停止按钮
function begin_end_num(b){
if(a==0){
document.getElementById(b.id).value="开始";
document.getElementById("shownum").style.color="red";
clearInterval(sj);
a=1;
}else{
document.getElementById(b.id).value="停止";
document.getElementById("shownum").style.color="";
sj=setInterval("creatnum()",50);
a=0;
}
}
</script>视频教学code:
<html>
<head>
<title>幸运号抽奖-小游戏</title>
<style>
.con{width:300px;margin:0 auto;}
.show{width:100%;text-align:center;}
.title{
color:#40AA53;
font-size:30px;
font-weight:bold;
}
.shownum{
border:2px solid #40AA53;
height:50px;
line-height:50px;
color:#40AA53;
font-weight:bold;
}
.btn{
background:#40AA53;
color:#ffffff;
border-radius: 16px;
margin:10px auto;
height:30px;
line-height:30px;
}
</style>
</head>
<body>
<div class="con">
<div class="show title">抽奖结果</div>
<div class="show shownum" id="shownum">即将开始</div>
<div class="show btn" onclick="kaishi();">开始</div>
<div class="show btn" onclick="zanting();">暂停</div>
</div>
<script>
// 创建4位随机数
function creatnum(){
return Math.floor(Math.random()*(9999-1000))+1000;
}
//
function kaishisuiji(){
document.getElementById("shownum").innerHTML=creatnum();
}
function kaishi(){
bz=setInterval(kaishisuiji,5);
}
function zanting(){
clearInterval(bz);
}
</script>
</body>
</html>你会发现连续点击开始按钮后，无法停止下来。
原因
1、多次点击显示系统时间按钮的话，会导致setInterval的ID值不断变化，每点一次ID值加1。
2、这样clearInterval获取到的ID值就只是当前的ID值。
3、之前的对应ID值发生的事件就无法停止。多次点击没有把之前的任务覆盖，而是增加了。
解决办法
加一个flag标记，使得setInterval只能执行一次，并且必须在clearInterval执行后才能执行第二次。形成相互约束。
视频教学code2-增加了标记:
<html>
<head>
<title>幸运号抽奖-小游戏</title>
<style>
.con{width:300px;margin:0 auto;}
.show{width:100%;text-align:center;}
.title{
color:#40AA53;
font-size:30px;
font-weight:bold;
}
.shownum{
border:2px solid #40AA53;
height:50px;
line-height:50px;
color:#40AA53;
font-weight:bold;
}
.btn{
background:#40AA53;
color:#ffffff;
border-radius: 16px;
margin:10px auto;
height:30px;
line-height:30px;
}
</style>
</head>
<body>
<div class="con">
<div class="show title">抽奖结果</div>
<div class="show shownum" id="shownum">即将开始</div>
<div class="show btn" onclick="kaishi();">开始</div>
<div class="show btn" onclick="zanting();">暂停</div>
</div>
<script>
//flag标记
var flag = true;
// 创建4位随机数
function creatnum(){
return Math.floor(Math.random()*(9999-1000))+1000;
}
//
function kaishisuiji(){
document.getElementById("shownum").innerHTML=creatnum();
}
function kaishi(){
//设置权限flag，使start、stop都只能执行一次
if(flag){
bz=setInterval(kaishisuiji,5);
flag = false;
}
}
function zanting(){
if(!flag){
clearInterval(bz);
flag =true;
}
}
</script>
</body>
</html>
更多建议：