快捷導(dǎo)航

JavaScript仿京東秒殺倒計(jì)時(shí)

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

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

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

仿京東秒殺倒計(jì)時(shí)

html代碼

<div id="box">
  <div class="txt">秒殺倒計(jì)時(shí)</div>
  <div class="hour"></div>
  <!-- 小時(shí)與分鐘之間的冒號(hào) -->
  <span class="h_m">:</span>
  <div class="minute"></div>
  <!-- 分鐘與秒之間的冒號(hào) -->
  <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ù)倒計(jì)時(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');//倒計(jì)時(shí)的結(jié)束時(shí)間，自己設(shè)置時(shí)間
countDown();//先調(diào)用一次這個(gè)函數(shù) 防止第一次刷新頁(yè)面有空白
//2、開(kāi)啟定時(shí)器
setInterval(countDown,1000);//1000毫秒，每一秒鐘調(diào)用一次函數(shù)
//3、倒計(jì)時(shí)-時(shí)分秒函數(shù)
function countDown(){
   var nowTime=+new Date(); //返回的是當(dāng)前時(shí)間的總的毫秒數(shù)
   var times=(inputTime-nowTime)/1000; // times是剩余時(shí)間的總的毫秒數(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;//同上
}

效果圖