本文例項為大家分享了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倒計時專題

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。