正文
JavaScript-setInterval-周期性行定时器-倒计时
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>距离放学还有<span id="time"></span></h1>
<button onclick="stop(this)">||</button>
<script>
//定义任务函数,计算now到target的时间差
function task(){
//定义目标时间end:2016年9月13日 12:00
var end=new Date("2016/12/28 23:00");
//获得当前时间now
var now=new Date();
//获得时间差(s):end-now/1000
var s=Math.round((end-now)/1000);
//求小时(h):
var h=Math.floor(s/3600);
//如果h<10,就改为0+h
h<10&&(h="0"+h);
//求分钟(m):
var m=Math.floor(s%3600/60);
//如果m<10,就改为0+m
m<10&&(m="0"+m);
//求秒(s):
s%=60;
//如果s<10,就改为0+s
s<10&&(s="0"+h);
//找到id为time的span,设置其内容为:h:m:s
document.getElementById("time").innerHTML=h+":"+m+":"+s;
}
task();
//启动定时器
var timer=setInterval(task,1000);
//停止定时器
function stop(btn){
//如果btn的内容为||
if(btn.innerHTML=="||"){
//停止定时器
clearInterval(timer);
//修改btn的内容为|>
btn.innerHTML="|>"}
//否则
else{
//启动定时器
timer=setInterval(task,1000);
//修改btn的内容为||
btn.innerHTML="||";
}
}
</script> </body>
</html>
