js实现精确到秒的倒计时效果

2019-11-20 09:52:02

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了两种倒计时效果，供大家参考，具体内容如下

效果图：

1.倒计时效果

<!DOCTYPE html><html> <head>  <meta charset="utf-8"/>  <title>倒计时</title>  <link rel="stylesheet" href="css/common.css" type="text/css" charset="utf-8"/>  <style type="text/css">  *{ margin:0; padding:0;}  .dtime{ margin:10px;}  .dtime span{ color:#C30;}  </style>    </head> <body>   <div class="dtime" id="a1"></div>  <div class="dtime" id="a2"></div>  <div class="dtime" id="a3"></div>  <div class="dtime" id="a4"></div>  <div class="dtime" id="a5"></div> </body>  <script> function tbdTimeCountdown(args){//倒计时函数  var ele=document.getElementById(args.id);  var alltime=args.alltime;  var arr=[];   var t=Math.floor(alltime/(24*60*60));  var yt=alltime%(24*60*60);   var s=Math.floor(yt/(60*60));  var ys=yt%(60*60);   var f=Math.floor(ys/(60));  var yf=ys%(60);   var m=yf;   arr[0]=[t,"天"];  arr[1]=[s,"小时"];  arr[2]=[f,"分"];  arr[3]=[m,"秒结束"];   var s=ce(arr,0);   ele.innerHTML=s;   var dong;   dong=setInterval(function(){   alltime-=1;   if(alltime<=0){    clearInterval(dong);    ele.innerHTML="<span>0</span>秒";    args.end();   }else{    t=Math.floor(alltime/(24*60*60));    yt=alltime%(24*60*60);     s=Math.floor(yt/(60*60));    ys=yt%(60*60);     f=Math.floor(ys/(60));    yf=ys%(60);     m=yf;     arr[0]=[t,"天"];    arr[1]=[s,"小时"];    arr[2]=[f,"分"];    arr[3]=[m,"秒结束"];     var s=ce(arr,0);     ele.innerHTML=s;   };        },1000);   function ce(arr,sta){   var i=sta;   if(i<arr.length){    if(arr[i][0]!=0){     var s="";     for(var j=i;j<arr.length;j++){      s+="<span>"+arr[j][0]+"</span>"+arr[j][1];     };     return s;    }else{     return ce(arr,i+1);    };   };  }; };//倒计时end //效果1 //86402 3602 62 tbdTimeCountdown({id:"a1",//含有倒计时容器  alltime:3,//倒计时总秒数  end:function(){//倒计时结束，时间为0是调用的函数   //alert("倒计时结束才会执行！");  },  }); //效果2 tbdTimeCountdown({id:"a2",//含有倒计时容器  alltime:62,//倒计时总秒数  end:function(){//倒计时结束，时间为0是调用的函数  },  }); //效果3 tbdTimeCountdown({id:"a3",//含有倒计时容器  alltime:3602,//倒计时总秒数  end:function(){//倒计时结束，时间为0是调用的函数  },  }); //效果4 tbdTimeCountdown({id:"a4",//含有倒计时容器  alltime:86402,//倒计时总秒数  end:function(){//倒计时结束，时间为0是调用的函数  },  }); //效果4 tbdTimeCountdown({id:"a5",//含有倒计时容器  alltime:154789,//倒计时总秒数  end:function(){//倒计时结束，时间为0是调用的函数  },  }); </script></html>

2.倒计时2.html

<!DOCTYPE html><html> <head>  <meta charset="utf-8"/>  <title>倒计时</title>  <link rel="stylesheet" href="css/common.css" type="text/css" charset="utf-8"/>  <style type="text/css">  *{ margin:0; padding:0;}  .dtime{ margin:10px;}  .dtime span{ color:#C30;}  </style>    </head> <body>  <div class="dtime" id="a1" alltime="3"></div>  <div class="dtime" id="a2" alltime="62"></div>  <div class="dtime" id="a3" alltime="3605"></div>  <div class="dtime" id="a4" alltime="48605"></div>  <div class="dtime" id="a5" alltime="123456"></div> </body>  <script> function tbdTimeCountdown(args){//倒计时函数  var ele=document.getElementById(args.id);  var alltime=Number(ele.getAttribute(args.alltime));  var arr=[];   var t=Math.floor(alltime/(24*60*60));  var yt=alltime%(24*60*60);   var s=Math.floor(yt/(60*60));  var ys=yt%(60*60);   var f=Math.floor(ys/(60));  var yf=ys%(60);   var m=yf;   arr[0]=[t,"天"];  arr[1]=[s,"小时"];  arr[2]=[f,"分"];  arr[3]=[m,"秒结束"];   var s=ce(arr,0);   ele.innerHTML=s;   var dong;   dong=setInterval(function(){   alltime-=1;   ele.setAttribute(args.alltime,alltime);   if(alltime<=0){    clearInterval(dong);    ele.innerHTML="<span>0</span>秒";    args.end();   }else{    t=Math.floor(alltime/(24*60*60));    yt=alltime%(24*60*60);     s=Math.floor(yt/(60*60));    ys=yt%(60*60);     f=Math.floor(ys/(60));    yf=ys%(60);     m=yf;     arr[0]=[t,"天"];    arr[1]=[s,"小时"];    arr[2]=[f,"分"];    arr[3]=[m,"秒结束"];     var s=ce(arr,0);     ele.innerHTML=s;   };        },1000);   function ce(arr,sta){   var i=sta;   if(i<arr.length){    if(arr[i][0]!=0){     var s="";     for(var j=i;j<arr.length;j++){      s+="<span>"+arr[j][0]+"</span>"+arr[j][1];     };     return s;    }else{     return ce(arr,i+1);    };   };  }; };//倒计时end //效果1 //86402 3602 62 tbdTimeCountdown({id:"a1",//含有倒计时容器  alltime:"alltime",//倒计时总秒数  end:function(){//倒计时结束，时间为0是调用的函数   alert("倒计时结束才会执行！");  },  }); //效果2 tbdTimeCountdown({id:"a2",//含有倒计时容器  alltime:"alltime",//倒计时总秒数  end:function(){//倒计时结束，时间为0是调用的函数  },  }); //效果3 tbdTimeCountdown({id:"a3",//含有倒计时容器  alltime:"alltime",//倒计时总秒数  end:function(){//倒计时结束，时间为0是调用的函数  },  }); //效果4 tbdTimeCountdown({id:"a4",//含有倒计时容器  alltime:"alltime",//倒计时总秒数  end:function(){//倒计时结束，时间为0是调用的函数  },  }); //效果4 tbdTimeCountdown({id:"a5",//含有倒计时容器  alltime:"alltime",//倒计时总秒数  end:function(){//倒计时结束，时间为0是调用的函数  },  }); </script></html>

大家可以参考专题《js倒计时功能汇总》进行深入学习。

以上就是本文的全部内容，希望对大家学习JavaScript程序设计有所帮助。

上一篇：js省市县三级联动效果实例

下一篇：解读Bootstrap v4 sass设计