JavaScript仿京東秒殺倒計時
阿新 • • 發佈:2020-03-19
本文例項為大家分享了JavaScript仿京東秒殺倒計時的具體程式碼,供大家參考,具體內容如下
仿京東秒殺倒計時
html程式碼
<div id="box"> <div class="txt">秒殺倒計時</div> <div class="hour"></div> <!-- 小時與分鐘之間的冒號 --> <span class="h_m">:</span> <div class="minute"></div> <!-- 分鐘與秒之間的冒號 --> <span class="m_s">:</span> <div class="second"></div> </div>
css樣式程式碼
*{ margin: 0; padding: 0; } #box{ width: 200px; height:300px; margin: 200px 200px; background: red; position: relative; } .txt{ width: 150px; height:50px; text-align: center; line-height: 50px; color: #fff; font-size: 30px; font-weight: 900; position: absolute; left: 25px; top: 50px; } .hour{ left: 20px; } .h_m{ left: 68px; } .minute{ left: 80px; } .m_s{ right: 68px; } .second{ left: 140px; } .hour,.minute,.second{ position: absolute; top:200px; color: #fff; font-size: 20px; text-align: center; line-height: 40px; width: 40px; height: 40px; background: black; } .h_m,.m_s{ color: #fff; font-size: 20px; font-weight: 900; position: absolute; bottom: 70px; }
js呼叫函式倒計時程式碼
//1、獲取元素 var hour=document.querySelector('.hour'); var minute=document.querySelector('.minute'); var second=document.querySelector('.second'); var inputTime=+new Date('2020-3-11 20:00:00');//倒計時的結束時間,自己設定時間 countDown();//先呼叫一次這個函式 防止第一次重新整理頁面有空白 //2、開啟定時器 setInterval(countDown,1000);//1000毫秒,每一秒鐘呼叫一次函式 //3、倒計時-時分秒函式 function countDown(){ var nowTime=+new Date(); //返回的是當前時間的總的毫秒數 var times=(inputTime-nowTime)/1000; // times是剩餘時間的總的毫秒數 var h=parseInt(times/60/60%24); h=h<10?'0'+h:h;//判斷數值小於10的情況 如 0-9改為 00-09 hour.innerHTML=h;//更改div裡面的內容 把h給獲取元素hour的內容 var m=parseInt(times/60%60); m=m<10?'0'+m:m; minute.innerHTML=m;//同上 var s=parseInt(times%60); s=s<10?'0'+s:s; second.innerHTML=s;//同上 }
效果圖
最後程式碼過程就不過多講解,比較簡單易寫,如需改進的地方,請評論再改進,謝謝
更多JavaScript時鐘特效點選檢視:JavaScript時鐘特效專題
更多JavaScript倒計時特效點選檢視:JavaScript倒計時專題
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。