JavaScript仿京東秒殺倒計時

更新時間：2020年03月17日 17:00:42 作者：牛先森

這篇文章主要為大家詳細介紹了JavaScript仿京東秒殺倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript仿京東秒殺倒計時的具體代碼，供大家參考，具體內(nèi)容如下

仿京東秒殺倒計時

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調(diào)用函數(shù)倒計時代碼

//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');//倒計時的結(jié)束時間，自己設(shè)置時間
countDown();//先調(diào)用一次這個函數(shù) 防止第一次刷新頁面有空白
//2、開啟定時器
setInterval(countDown,1000);//1000毫秒，每一秒鐘調(diào)用一次函數(shù)
//3、倒計時-時分秒函數(shù)
function countDown(){
   var nowTime=+new Date(); //返回的是當前時間的總的毫秒數(shù)
   var times=(inputTime-nowTime)/1000; // times是剩余時間的總的毫秒數(shù)
   var h=parseInt(times/60/60%24);
   h=h<10?'0'+h:h;//判斷數(shù)值小于10的情況 如 0-9改為 00-09
   hour.innerHTML=h;//更改div里面的內(nèi)容 把h給獲取元素hour的內(nèi)容
   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;//同上
}

效果圖