JavaScript可以开始和停止的倒计时_停止倒计时-优快云博客

代码如下：

<!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)),计算并显示分钟数。