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可以开始和停止的倒计时就介绍到这了。

回复

我来回复
  • 暂无回复内容