您的位置：首页 > Web前端 > JavaScript

JavaScript可以开始和停止的倒计时

2018-02-11 15:40 579 查看

代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>倒计时</title>
<style>
body, div{
margin:0;
padding:0;
}
body{
color:#fff;
font:16px/1.5 \5fae\8f6f\96c5\9ed1;
}
#countdown{
width:300px;
text-align:center;
background:#1a1a1a;
margin:10px auto;
padding:20px 0;
}
input{
border:0;
width:283px;
height:50px;
cursor:pointer;
margin-top:20px;
}
span{
color:#000;
width:80px;
line-height:2;
background:#fbfbfb;
border:2px solid #b4b4b4;
margin:0 10px;
padding:0 10px;
}
</style>
<script>
window.onload=function (){
var oCountDown=document.getElementById("countdown");
var aInput=oCountDown.getElementsByTagName("input")[0];
var timer=null;
aInput.onclick=function(){
this.value=="开始倒计时"?(timer=setInterval(updateTime,1000),this.value="结束倒计时")
:(clearInterval(timer),this.value="开始倒计时");
};
function format(a){
return a.toString().replace(/^(\d)$/,'0$1')
}
function updateTime (){
var aSpan=oCountDown.getElementsByTagName("span");
var oRemain=aSpan[0].innerHTML.replace(/^0/,'') * 60
+parseInt(aSpan[1].innerHTML.replace(/^0/,''));
if(oRemain<=0){
clearInterval(timer);
return
}
oRemain--;
aSpan[0].innerHTML=format(parseInt(oRemain / 60));
oRemain %= 60;
aSpan[1].innerHTML=format(parseInt(oRemain));
}
}
</script>
</head>
<body>
<div id="countdown"> <span>01</span>分钟<span>40</span>秒
<input type="button" value="开始倒计时" />
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:

（1）.window.onload=function (){}，当文档内容完全加载完毕再去执行函数中的代码。
（2）.var oCountDown=document.getElementById("countdown")，获取id属性值为countdown的元素对象。
（3）.var aInput=oCountDown.getElementsByTagName("input")[0]，获取第一个input元素，也就是按钮元素。
（4）.var timer=null，用来作为定时器方法的标识。
（5）.aInput.onclick=function(){}，为按钮注册click事件处理函数。
（6）.this.value=="开始倒计时"?(timer=setInterval(updateTime,1000),this.value="结束倒计时") : (clearInterval(timer),this.value="开始倒计时")，使用三元运算符来设置按钮的value属性值，和开始和停止倒计时效果。
（7）.function format(a){
return a.toString().replace(/^(\d)$/,'0$1');
},格式化数字，如果是个位数字，前面加0.
（8）.function updateTime (){}，此函数是实现倒计时效果的核心。
（9）.var aSpan=oCountDown.getElementsByTagName("span")，获取span元素集合。
（10）.var oRemain=aSpan[0].innerHTML.replace(/^0/,'') * 60+parseInt(aSpan[1].innerHTML.replace(/^0/,''))，使用正则表达式将开始的零删除，并计算出所有时间的秒数。
（11）.if(oRemain<=0){
clearInterval(timer);
return
}，如果剩余的秒数小于等于零，自然要停止倒计时效果了，并跳出函数。
（12）.oRemain--，秒数减一。
（13）.aSpan[0].innerHTML=format(parseInt(oRemain / 60)),计算并显示分钟数。
（14）.oRemain %= 60，进行求余运算，算出秒数。
（15）.aSpan[1].innerHTML=format(parseInt(oRemain))，显示秒数。

效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航