js實現(xiàn)精確到秒的倒計時效果

更新時間：2016年05月29日 10:21:10 作者：透筆度

這篇文章主要為大家詳細介紹了js實現(xiàn)精確到秒的倒計時效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了兩種倒計時效果，供大家參考，具體內(nèi)容如下

效果圖：

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){//倒計時函數(shù)
 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,//倒計時總秒數(shù)
 end:function(){//倒計時結束，時間為0是調用的函數(shù)
  //alert("倒計時結束才會執(zhí)行！");
 },
 
 });
 //效果2
 tbdTimeCountdown({id:"a2",//含有倒計時容器
 alltime:62,//倒計時總秒數(shù)
 end:function(){//倒計時結束，時間為0是調用的函數(shù)
 },
 
 });
 //效果3
 tbdTimeCountdown({id:"a3",//含有倒計時容器
 alltime:3602,//倒計時總秒數(shù)
 end:function(){//倒計時結束，時間為0是調用的函數(shù)
 },
 
 });
 //效果4
 tbdTimeCountdown({id:"a4",//含有倒計時容器
 alltime:86402,//倒計時總秒數(shù)
 end:function(){//倒計時結束，時間為0是調用的函數(shù)
 },
 
 });
 //效果4
 tbdTimeCountdown({id:"a5",//含有倒計時容器
 alltime:154789,//倒計時總秒數(shù)
 end:function(){//倒計時結束，時間為0是調用的函數(shù)
 },
 
 });
 </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){//倒計時函數(shù)
 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",//倒計時總秒數(shù)
 end:function(){//倒計時結束，時間為0是調用的函數(shù)
  alert("倒計時結束才會執(zhí)行！");
 },
 
 });
 //效果2
 tbdTimeCountdown({id:"a2",//含有倒計時容器
 alltime:"alltime",//倒計時總秒數(shù)
 end:function(){//倒計時結束，時間為0是調用的函數(shù)
 },
 
 });
 //效果3
 tbdTimeCountdown({id:"a3",//含有倒計時容器
 alltime:"alltime",//倒計時總秒數(shù)
 end:function(){//倒計時結束，時間為0是調用的函數(shù)
 },
 
 });
 //效果4
 tbdTimeCountdown({id:"a4",//含有倒計時容器
 alltime:"alltime",//倒計時總秒數(shù)
 end:function(){//倒計時結束，時間為0是調用的函數(shù)
 },
 
 });
 //效果4
 tbdTimeCountdown({id:"a5",//含有倒計時容器
 alltime:"alltime",//倒計時總秒數(shù)
 end:function(){//倒計時結束，時間為0是調用的函數(shù)
 },
 
 });
 </script>
</html>

大家可以參考專題《js倒計時功能匯總》進行深入學習。

以上就是本文的全部內(nèi)容，希望對大家學習JavaScript程序設計有所幫助。

您可能感興趣的文章: