溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JavaScript仿京東秒殺倒計時

發布時間:2020-09-07 03:41:05 來源:腳本之家 閱讀:798 作者:牛先森 欄目:web開發

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

仿京東秒殺倒計時

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倒計時特效點擊查看:JavaScript倒計時專題

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女