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

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

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程序设计有所帮助。