代码如下: <!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.οnlοad=function (){ var oCountDown=document.getElementById("countdown"); var aInput=oCountDown.getElementsByTagName("input")[0]; var timer=null; aInput.οnclick=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.οnlοad=function (){},当文档内容完全加载完毕再去执行函数中的代码。 (2).var oCountDown=document.getElementById("countdown"),获取id属性值为countdown的元素对象。 (3).var aInput=oCountDown.getElementsByTagName("input")[0],获取第一个input元素,也就是按钮元素。 (4).var timer=null,用来作为定时器方法的标识。 (5).aInput.οnclick=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)),显示秒数。 效果如下: |
JavaScript可以开始和停止的倒计时
最新推荐文章于 2023-06-28 10:34:33 发布