JavaScript倒計時欄的實現
阿新 • • 發佈：2018-11-17
這邊小編也是剛剛過完雙11呀（快遞還沒有到很絕望），剁完手來寫上這新學的知識。雙十一很多電商網站隨處可見倒計時的框圖那他們到底是怎樣實現的時刻計時。
主要用法在於對js中Data物件的方法，話不多說直接擼上程式碼，主要難點在於對每一項時間的獲取
<style> #countdown{ margin: 200px auto; font-size: 20px; text-align: center; color: red; } </style> <script> window.onload=function(){ var enddata=new Date("2018/12/12 00:00:00"); //這邊是自定義的截止時間 var div=document.getElementById("countdown"); function hold(){ var nowtime=new Date(); //每一次執行獲取當前時間 var second=parseInt((enddata.getTime()-nowtime.getTime())/1000); var minute=parseInt(second/60%60); var hour=parseInt(second/3600%24); var day=parseInt(second/3600/24); second=second%60; second<10 ? second="0"+second : second; //此下四行確保格式每一位數都是標準的兩位 minute<10 ? minute="0"+minute : minute; hour<10 ? hour="0"+hour : hour; day<10 ? day="0"+day : day; div.innerHTML="距離雙十二開搶還有"+day+"天"+hour+"小時"+minute+"分"+second+"秒"; } setInterval(hold,1000); //每一秒執行一次，這邊第二個引數為毫秒單位 } </script> <body> <div id="countdown"></div> </body>
效果圖如下（動態變化）：
主要在於setInterval(); 方法，其餘部分小編已經寫上了備註，當然這邊只是簡單的寫了一下樣式。