本文實例為大家分享了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倒計時專題
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。