快捷導(dǎo)航

JavaScript制作頁(yè)面倒計(jì)時(shí)器的實(shí)現(xiàn)

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

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

制作頁(yè)面倒計(jì)時(shí)器，選定一個(gè)未來(lái)時(shí)間，得到幾天幾時(shí)幾分幾秒的倒計(jì)時(shí)。

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

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

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

3.在setInterval()函數(shù)中調(diào)用的countdown函數(shù)不能加()，因?yàn)榧由现髸?huì)自動(dòng)調(diào)用函數(shù)，使得倒計(jì)時(shí)不能正常實(shí)現(xiàn)。

注意：1000ms = 1s

 &lt;!-- 文本顯示標(biāo)簽 --&gt;
    &lt;p&gt;&lt;/p&gt;
    &lt;script&gt;
        var p = document.querySelector('p');    //獲得p標(biāo)簽事件
        var endtime = new Date('2022-7-31 12:00:00').getTime(); //未來(lái)時(shí)間的毫秒值
        setInterval(countdown,1000);    //倒計(jì)時(shí)函數(shù)
        function countdown(){
            var nowtime = new Date().getTime(); //現(xiàn)在時(shí)間的毫秒值
            var time = endtime - nowtime;   //兩個(gè)時(shí)間的毫秒值差，用于下面時(shí)間的計(jì)算
            var day = parseInt(time/(1000*60*60*24));  //天數(shù)
            var hour = parseInt(time/(1000*60*60)%24);  //小時(shí)數(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標(biāo)簽中
    }
        
    &lt;/script&gt;

結(jié)果展示：

到此這篇關(guān)于JavaScript制作頁(yè)面倒計(jì)時(shí)器的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)JavaScript 頁(yè)面倒計(jì)時(shí)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: