JavaScript制作頁面倒計時器的實現(xiàn)

更新時間：2024年07月01日 11:39:51 作者：yorup

這篇文章主要為大家詳細介紹了JavaScript制作頁面倒計時器的實現(xiàn),具有一定的參考價值,感興趣的小伙伴們可以參考一下

制作頁面倒計時器，選定一個未來時間，得到幾天幾時幾分幾秒的倒計時。

在這里選擇使用兩個時間相差的毫秒數(shù)來計算相對應(yīng)的天數(shù)、小時數(shù)、分鐘數(shù)和秒數(shù)。為了使代碼看起來簡潔，進行了封裝函數(shù)。

1.setInterval(,1000)倒計時函數(shù)，且每隔1000ms就循環(huán)執(zhí)行，以實現(xiàn)倒計時的效果。

2.關(guān)于這里毫秒值獲得，在前面js的時間對象博客中有詳細說明

3.在setInterval()函數(shù)中調(diào)用的countdown函數(shù)不能加()，因為加上之后會自動調(diào)用函數(shù)，使得倒計時不能正常實現(xiàn)。

注意：1000ms = 1s

 &lt;!-- 文本顯示標簽 --&gt;
    &lt;p&gt;&lt;/p&gt;
    &lt;script&gt;
        var p = document.querySelector('p');    //獲得p標簽事件
        var endtime = new Date('2022-7-31 12:00:00').getTime(); //未來時間的毫秒值
        setInterval(countdown,1000);    //倒計時函數(shù)
        function countdown(){
            var nowtime = new Date().getTime(); //現(xiàn)在時間的毫秒值
            var time = endtime - nowtime;   //兩個時間的毫秒值差，用于下面時間的計算
            var day = parseInt(time/(1000*60*60*24));  //天數(shù)
            var hour = parseInt(time/(1000*60*60)%24);  //小時數(shù)
            var minute = parseInt(time/1000/60%60);     //分鐘數(shù)
            var seconds = parseInt(time/1000%60);       //秒數(shù)
            p.innerText = day+'天'+hour+':'+minute+':'+seconds;     //把內(nèi)容添加到p標簽中
    }
        
    &lt;/script&gt;

結(jié)果展示：