【構思】
因為只需要的是兩小時,所以時間直接寫死,然后通過setInterval每1000ms對時間進行減1操作
前期未考慮到當時分秒小於10的狀態,所以后面又加上了一個checkTime()來進行限制,小時則直接在變量中加了。
【步驟】
<html> <head> <title>2小時倒計時</title> <style> *{ margin: 0; padding: 0; } .cutDown{ width: 100%; height: 100%; background: url(2.jpg) no-repeat; background-size: 100%; text-align: center; color: #fff; font-size: 80px; font-weight: 100; font-family: monospace; position: absolute; bottom: 0px; } </style> </head> <body > <div id="time" class="cutDown"></div> <script> window.onload = function(){ var time = { init: function() { var oTime=document.getElementById("time"); var h='0' + 1; var m=59; var s=59; oTime.innerHTML="02 : 00 : 00"; //進行倒計時顯示 var time = setInterval(function(){ --s; if(s<0){ --m; s=59; } if(m<0){ --h; m=59 } if(h<0){ s=0; m=0; } // 判斷當時分秒小於10時補0 function checkTime(i){ if (i < 10) { i = '0' + i } return i; } s = checkTime(s); m = checkTime(m); oTime.innerHTML=h+" : "+m+" : "+s; },1000); } } time.init(); } </script> </body> </html>