JavaScript可以开始和停止的倒计时
JavaScript可以开始和停止的倒计时属于前端实例代码，有关更多实例代码大家可以查看。
本章节分享一段代码实例，它实现了倒计时效果，并且能够实现开始和停止的控制。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
body, div{
margin:0;
padding:0;
}
body{
color:#fff;
font:16px/1.5 faef6fc5ed1;
}
#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))，显示秒数。
二.相关阅读:
（1）.getElementsByTagName()参阅document.getElementsByTagName()一章节。
（2）.setInterval()参阅setInterval()一章节。
（3）.replace()参阅正则表达式replace()函数一章节。
（4）.parseInt()参阅javascript parseInt()一章节。
（5）.求余运算可以参阅javascript求余运算一章节。
JavaScript可以开始和停止的倒计时，这样的场景在实际项目中还是用的比较多的，关于JavaScript可以开始和停止的倒计时就介绍到这了。