Javascript倒計(jì)時(shí)代碼：如何使用Javascript實(shí)現(xiàn)倒計(jì)時(shí)效果？

更新時(shí)間:2021-11-17 來(lái)源:黑馬程序員瀏覽量:

IT培訓(xùn)班

在一些電商網(wǎng)站的活動(dòng)頁(yè)上會(huì)經(jīng)常出現(xiàn)折扣商品的倒計(jì)時(shí)標(biāo)記，顯示離活動(dòng)結(jié)束還剩x天x小時(shí)X分X秒，像這樣的倒計(jì)時(shí)效果就可以利用日期對(duì)象來(lái)實(shí)現(xiàn)。

倒計(jì)時(shí)的核心算法是輸人的時(shí)間減去現(xiàn)在的時(shí)間，得出的剩余時(shí)間就是要顯示的倒計(jì)時(shí)時(shí)間，這需要把時(shí)間都轉(zhuǎn)化成時(shí)間戳(毫秒數(shù))來(lái)進(jìn)行計(jì)算，把得到的毫秒數(shù)轉(zhuǎn)換為天數(shù)、小時(shí)、分?jǐn)?shù)、秒數(shù)。具體示例代碼如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript倒計(jì)時(shí)代碼|黑馬程序員web前端培訓(xùn)高手班 http://web.itheima.com</title>
    <style>
        body{
            background-color: #f5f5f5;
        }
        p{
            margin: 100px auto;
            width: 500px;
            text-align: center;
            font-weight: 700;
            font-size: 16px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>
        <p id="t"></p>
    </div>
</body>
<script>
    // 倒計(jì)時(shí)函數(shù)
    function countDown(time) {
        var nowTime = +new Date();
        var inputTime = +new Date(time);
        var times = (inputTime - nowTime) / 1000;
        var d = parseInt(times / 60 / 60 / 24);
        d = d < 10 ? '0' + d : d;
        var h = parseInt(times / 60 / 60 % 24);
        h = h < 10 ? '0' + h : h;
        var m = parseInt(times / 60 % 60);
        m = m < 10 ? '0' + m : m;
        var s = parseInt(times % 60);
        s = s < 10 ? '0' + s : s;
        return d + '天' + h + '時(shí)' + m + '分' + s + '秒';
    }
    // 設(shè)置終止時(shí)間
    time = '2021-11-30 10:57:56';

    //  設(shè)置定時(shí)器1秒運(yùn)行1次
    window.setInterval(function(){
        time1 = countDown(time);
        let pTime = document.getElementById('t');
        pTime.innerHTML = time1;
    }, 1000);
</script>
</html>

上述代碼中，第2行的+new Date()是new Date().getTime()代碼的簡(jiǎn)寫，返回當(dāng)前時(shí)間戳，單位是毫秒。第3行代碼是設(shè)置活動(dòng)的結(jié)束時(shí)間戳。第4行代碼計(jì)算剩余毫秒數(shù)，需要轉(zhuǎn)換為秒數(shù)，轉(zhuǎn)換規(guī)則為1秒/1000毫秒。第5~13行代碼計(jì)算天數(shù)小、小時(shí)h、分時(shí)m、秒數(shù)s，并使用return返回。第16行代碼輸出距離指定結(jié)束日期2021-11-30 10:57:56還剩多少時(shí)間。

代碼運(yùn)行效果如下：

1637142146807_JavaScript倒計(jì)時(shí).gif