摘要： 大家好,小宜來(lái)為大家講解下。倒計(jì)時(shí)網(wǎng)頁(yè)代碼，網(wǎng)頁(yè)倒計(jì)時(shí)計(jì)時(shí)器）這個(gè)很多人還不知道,現(xiàn)在讓我們一起來(lái)看看吧！一、倒計(jì)時(shí)的原理1、倒計(jì)時(shí)是指在指定的時(shí)間（比如設(shè)置的一段時(shí)間或某一特定的...

大家好,小宜來(lái)為大家講解下。倒計(jì)時(shí)網(wǎng)頁(yè)代碼，網(wǎng)頁(yè)倒計(jì)時(shí)計(jì)時(shí)器）這個(gè)很多人還不知道,現(xiàn)在讓我們一起來(lái)看看吧！

一、倒計(jì)時(shí)的原理

1、倒計(jì)時(shí)是指在指定的時(shí)間（比如設(shè)置的一段時(shí)間或某一特定的日期或時(shí)間點(diǎn)）之前之后，網(wǎng)頁(yè)上顯示文字或圖片，可以用來(lái)做活動(dòng)開(kāi)始倒計(jì)時(shí)，或活動(dòng)進(jìn)行倒計(jì)時(shí)，也可以用來(lái)顯示未來(lái)某一時(shí)間點(diǎn)的倒計(jì)時(shí)。

2、倒計(jì)時(shí)的實(shí)現(xiàn)：通過(guò)JavaScript把當(dāng)前日期的毫秒數(shù)減去用戶設(shè)定的毫秒數(shù)，從而得到剩余的毫秒數(shù)。然后利用這個(gè)當(dāng)前毫秒數(shù)來(lái)計(jì)算出剩余的天數(shù)，小時(shí)數(shù)，分鐘數(shù)和秒數(shù)，最后將當(dāng)前的日期的秒數(shù)與用戶設(shè)置的秒數(shù)相減，以及顯示用戶設(shè)置的秒數(shù)之前的時(shí)間，就像賽跑中的倒計(jì)時(shí)一樣。

二、實(shí)現(xiàn)倒計(jì)時(shí)網(wǎng)頁(yè)代碼

1、首先獲取頁(yè)面顯示時(shí)間所需要用到的時(shí)間段，比如可以用js獲取當(dāng)前時(shí)間(如下代碼)：

var now = new Date(); // 獲取當(dāng)前時(shí)間

2、然后設(shè)置未來(lái)日期，然后計(jì)算出兩個(gè)時(shí)間段之間的時(shí)間差：

var endTime = new Date(\"2020/07/23 10:00:00\");

var diff = endTime.getTime() - now.getTime(); // 獲得兩個(gè)時(shí)間段的時(shí)間差

3、然后將時(shí)間差進(jìn)行單位換算：

/*得到的時(shí)間差，要進(jìn)行ms -> s的轉(zhuǎn)換，再進(jìn)行整數(shù)部分和小數(shù)部分的分離*/

var intDiff = parseInt(diff / 1000); // 將毫秒數(shù)換算成秒數(shù)

var day=0, hour=0, minute=0, second=0; // 聲明值

if(intDiff > 0){

// 大于0的話可以獲取天數(shù)和小時(shí)

day = Math.floor(intDiff / (60 * 60 * 24));

hour = Math.floor(intDiff / (60 * 60)) - (day * 24);

minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);

second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);

}

4、最后將倒計(jì)時(shí)顯示到頁(yè)面上，可以使用HTML和CSS，也可以使用JavaScript：

//顯示時(shí)間的DIV

var showTime=document.querySelector(\"#time\");

//顯示倒計(jì)時(shí)的JS

function countDown(){

if (second <= 0) {

second = 59;

minute = minute - 1;

if (minute <= 0) {

minute = 59;

hour = hour - 1;

if (hour <= 0) {

hour = 59;

day = day - 1;

}

}

}

else {

second = second - 1;

}

showTime.innerHTML=day+\"天 \"+hour+\"小時(shí) \"+minute+\"分 \"+second+\"秒\";

}

setInterval(countDown,1000);

5、定時(shí)執(zhí)行倒計(jì)時(shí)函數(shù)：

setInterval(countDown,1000); // 每隔1000毫秒執(zhí)行一次

六、結(jié)語(yǔ)

倒計(jì)時(shí)網(wǎng)頁(yè)代碼主要通過(guò)JavaScript取得當(dāng)前日期的毫秒數(shù)，算出距離指定日期剩余的毫秒數(shù)，再把它轉(zhuǎn)化成 天數(shù)，小時(shí)，分鐘，秒 并顯示在頁(yè)面上，最后通過(guò)定時(shí)器定時(shí)執(zhí)行倒計(jì)時(shí)函數(shù)就可以實(shí)現(xiàn)倒計(jì)時(shí)的功能了。

1.引入需要的javaScript組件：

首先需要引入需要的javascript組件來(lái)創(chuàng)建倒計(jì)時(shí)網(wǎng)頁(yè)，例如jQuery、setTimeout()、clearTimeout()函數(shù)等， 以此來(lái)保證網(wǎng)頁(yè)的順利運(yùn)行。

2.定義倒計(jì)時(shí)函數(shù)：

定義倒計(jì)時(shí)函數(shù)，該函數(shù)會(huì)接受倒計(jì)時(shí)總時(shí)長(zhǎng)、當(dāng)前時(shí)間（即網(wǎng)頁(yè)首次加載時(shí)event.timeStamp），以及倒計(jì)時(shí)dom對(duì)象，然后通過(guò)設(shè)置setTimeout函數(shù)周期性的更新倒計(jì)時(shí)dom對(duì)象來(lái)實(shí)現(xiàn)倒計(jì)時(shí)顯示效果。

3.綁定倒計(jì)時(shí)觸發(fā)事件：

當(dāng)需要更新倒計(jì)時(shí)dom對(duì)象時(shí)，可以綁定onload事件，這樣可以省去使用多一個(gè)變量來(lái)記錄當(dāng)前網(wǎng)頁(yè)加載的時(shí)間，也減少了對(duì)其他頁(yè)面依賴。在頁(yè)面開(kāi)始倒計(jì)時(shí)之前，可以先做一些預(yù)處理，比如把倒計(jì)時(shí)dom對(duì)象中的時(shí)間信息做計(jì)算處理，獲取最新的時(shí)間信息等。

4.更新倒計(jì)時(shí)dom對(duì)象信息：

最后，在倒計(jì)時(shí)函數(shù)中，計(jì)算離倒計(jì)時(shí)結(jié)束的剩余時(shí)間，并更新倒計(jì)時(shí)dom對(duì)象信息（可以根據(jù)實(shí)際需求使用不同的時(shí)間表示形式，如時(shí)分秒等）。

5.清除倒計(jì)時(shí)函數(shù)：

倒計(jì)時(shí)功能完成之后，為了保持頁(yè)面的運(yùn)行效率，可以使用clearTimeout函數(shù)停止倒計(jì)時(shí)函數(shù)，以此來(lái)取消定時(shí)器行為，避免資源的浪費(fèi)。

本文倒計(jì)時(shí)網(wǎng)頁(yè)代碼，網(wǎng)頁(yè)倒計(jì)時(shí)計(jì)時(shí)器）到此分享完畢，希望對(duì)大家有所幫助。