快捷導(dǎo)航

JS利用時(shí)間戳倒計(jì)時(shí)的實(shí)現(xiàn)示例

更新時(shí)間：2023年12月04日 15:40:17 作者：遠(yuǎn)近高低各不同

這篇文章主要介紹了JS利用時(shí)間戳倒計(jì)時(shí)的實(shí)現(xiàn)示例,本文將提供代碼示例和詳細(xì)的步驟,幫助你實(shí)現(xiàn)一個(gè)簡(jiǎn)單而實(shí)用的時(shí)間戳倒計(jì)時(shí),感興趣的可以了解一下

我們?cè)诠淠硨?，或者逛某東時(shí)，我們時(shí)常看到一個(gè)倒計(jì)時(shí)，時(shí)間一到就開搶，這個(gè)倒計(jì)時(shí)是如何做的呢？讓我為大家介紹一下。

理性分析一下：

1.用將來時(shí)間減去現(xiàn)在時(shí)間就是剩余的時(shí)間
2.核心：使用將來的時(shí)間戳減去現(xiàn)在的時(shí)間戳
3.把剩余的時(shí)間轉(zhuǎn)換為天時(shí) 分秒注意：通過時(shí)間戳得到的是毫秒，需要轉(zhuǎn)換為秒在計(jì)算

轉(zhuǎn)換公式：

d = parseInt(總秒數(shù) / 60 / 60 / 24) 計(jì)算天數(shù)
h = parseInt(總秒數(shù) / 60 / 60 % 24) 計(jì)算小時(shí)
m = parseInt(總秒數(shù) / 60 % 60) 計(jì)算分?jǐn)?shù)
s = parseInt(總秒數(shù) % 60) 計(jì)算當(dāng)前秒數(shù)

    // 封裝時(shí)間
    function getTime() {
        // 獲取當(dāng)前的時(shí)間戳
        let now = +new Date()
        // 獲取將來的時(shí)間戳
        let last = +new Date("2023-11-3 18:30:00")
        // 獲取剩余的時(shí)間戳 記得轉(zhuǎn)換為秒數(shù)
        let count = (last - now) / 1000
        // 轉(zhuǎn)換為時(shí)分秒
        // h = parseInt(總秒數(shù) / 60 / 60 % 24) 計(jì)算小時(shí)
        // m = parseInt(總秒數(shù) / 60 % 60) 計(jì)算分?jǐn)?shù)
        // s = parseInt(總秒數(shù) % 60) 計(jì)算當(dāng)前秒數(shù)
        let h = parseInt(count / 60 / 60 % 24)
        h = h < 10 ? "0" + h : h
        let m = parseInt(count / 60 % 60)
        m = m < 10 ? "0" + m : m
        let s = parseInt(count % 60)
        s = s < 10 ? "0" + s : s
        // 把時(shí)分秒寫到對(duì)應(yīng)的盒子里面
        document.querySelector("#hour").innerHTML = h
        document.querySelector("#minutes").innerHTML = m
        document.querySelector("#second").innerHTML = s
    }
    // 使用定時(shí)器
    setInterval(getTime,1000)

效果圖：

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

您可能感興趣的文章: