js簡單時分秒倒計時
阿新 • • 發佈：2018-02-17
ner 結果 進行 ear war fun all time 倒計時
最近做瀏覽器界面倒計時，用js就實現，兩種方式：
一：設置時長，進行倒計時。比如考試時間等等
代碼如下：
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>簡單時長倒計時</title> 5 <SCRIPT type="text/javascript"> 6 var maxtime = 60 * 60; //一個小時，按秒計算，自己調整! 7 function CountDown() { 8 if(maxtime >= 0) { 9 minutes = Math.floor(maxtime / 60); 10 seconds = Math.floor(maxtime % 60); 11 msg = "距離結束還有" + minutes + "分" + seconds + "秒"; 12 document.all["timer"].innerHTML = msg; 13 if (maxtime== 5 * 60)alert("還剩5分鐘"); 14 --maxtime; 15 } else{ 16 clearInterval(timer); 17 alert("時間到，結束!"); 18 } 19 } 20 timer = setInterval("CountDown()", 1000); 21 </SCRIPT> 22 </head> 23 <body> 24 <div id="timer" style="color:red"></div> 25 <div id="warring" style="color:red"></div> 26 </body> 27 </html>
運行結果：
二：設置時間戳，進行倒計時。比如距離活動結束時間等等
代碼如下：
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>js簡單時分秒倒計時</title> 5 <script type="text/javascript"> 6 function countTime() { 7 //獲取當前時間 8 var date = new Date(); 9 var now = date.getTime(); 10 //設置截止時間 11 var str="2018/3/17 00:00:00"; 12 var endDate = new Date(str); 13 var end = endDate.getTime(); 14 15 //時間差 16 var leftTime = end-now; 17 //定義變量 d,h,m,s保存倒計時的時間 18 var d,h,m,s; 19 if (leftTime>=0) { 20 d = Math.floor(leftTime/1000/60/60/24); 21 h = Math.floor(leftTime/1000/60/60%24); 22 m = Math.floor(leftTime/1000/60%60); 23 s = Math.floor(leftTime/1000%60); 24 } 25 //將0-9的數字前面加上0，例1變為01 26 d = checkTime(d); 27 h = checkTime(h); 28 m = checkTime(m); 29 s = checkTime(s); 30 function checkTime(i){ 31 if (i<10) { 32 i = "0"+i; 33 } 34 return i; 35 } 36 //將倒計時賦值到div中 37 document.getElementById("_d").innerHTML = d+"天"; 38 document.getElementById("_h").innerHTML = h+"時"; 39 document.getElementById("_m").innerHTML = m+"分"; 40 document.getElementById("_s").innerHTML = s+"秒"; 41 //遞歸每秒調用countTime方法，顯示動態時間效果 42 setTimeout(countTime,1000); 43 44 } 45 </script> 46 </head > 47 <body onload="countTime()" > 48 <div> 49 <span id="_d">00</span> 50 <span id="_h">00</span> 51 <span id="_m">00</span> 52 <span id="_s">00</span> 53 </div> 54 </body> 55 </html>
運行結果：
js簡單時分秒倒計時