JavaScript仿京東實現(xiàn)秒殺倒計時案例詳解

第JavaScript仿京東實現(xiàn)秒殺倒計時案例詳解功能介紹：

1、這個倒計時是不斷變化的，因此需要定時器來自動變化（setInterval）

2、三個黑色的盒子，分別存放時、分秒

3、三個盒子利用innerHTML存入倒計時

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

metahttp-equiv="X-UA-Compatible"content="IE=edge"

metaname="viewport"content="width=device-width,initial-scale=1.0"

titleDocument/title

style

div{

background-color:black;

width:50px;

height:50px;

margin-left:20px;

float:left;

color:white;

font-size:20px;

text-align:center;

line-height:50px;

/style

/head

body

div/div

div/div

div/div

script

//把時間放到div中去

vardiv=document.querySelectorAll('div')

vartimer1=setInterval(function(){

vardate1=newDate(2025,3,2,18,40,0);//獲得到點截至?xí)r間距離標準時間的毫秒數(shù)

vardate2=newDate();//獲得目前時間距離準時間的毫秒數(shù)

vardate=(date1-date2)/1000;//用到點時間的毫秒數(shù)減去現(xiàn)在時間的毫秒數(shù)，必須先化為秒單位，之后再進行轉(zhuǎn)換

varh=parseInt((date/60/60)%24);//小時

varm=parseInt((date/60)%60);//分鐘

vars=parseInt(date%60);//秒一定要包含在這個函數(shù)中，因為是間隔1秒就要重新算一遍,需要提高準確率的話，把秒數(shù)減少（刷新間隔）

div[2].innerHTML=s

div[1].innerHTML=m

div[0].innerHTML=h

},[1])

/script

/body

/html

改進：

script

//把時間放到div中去

vardiv=document.querySelectorAll('div')

vartimer1=setInterval(fn,[1000])

vardate1=newDate(2025,3,2,18,40,0);

vardate2=newDate();

vardate=(date1-date2)/1000;

varh=parseInt((date/60/60)%24);

varm=parseInt((date/60)%60);

vars=parseInt(date%60);

div[2].innerHTML=s

div[1].innerHTML=m

div[0].innerHTML=h

//解決剛刷新，數(shù)字不顯示的問題

functionfn(){

vardate1=newDate(2025,3,2,18,40,0);//獲得到點截至?xí)r間距離標準時間的毫秒數(shù)

vardate2=newDate();//獲得目前時間距離準時間的毫秒數(shù)

vardate=(date1-date2)/1000;//用到點時間的毫秒數(shù)減去現(xiàn)在時間的毫秒數(shù)，必須先化為秒單位，之后再進行轉(zhuǎn)換

varh=parseInt((date/60/60)%24);//小時

varm=parseInt((date/60)%60);//分鐘

vars=parseInt(date%60);//秒一定要包含在這個函數(shù)中（最好是封裝一個函數(shù)），因為是間隔1秒就要重新算一遍,需要提高準確率的話，把秒數(shù)減少（刷新間隔）.如果間隔比較大的話，一刷新頁面，會產(chǎn)生空白。解決方法就是，在未調(diào)用這個函數(shù)前，先把時間放入到div盒子中

div[2].innerHTML=s

div[1].innerHTML=m

div[0].innerHTML=h

/script

添加停止倒計時按鈕：

button停止倒計時/button

v