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

更新時間:2021-11-17 來源:黑馬程序員瀏覽量:

IT培訓班

在一些電商網(wǎng)站的活動頁上會經(jīng)常出現(xiàn)折扣商品的倒計時標記，顯示離活動結束還剩x天x小時X分X秒，像這樣的倒計時效果就可以利用日期對象來實現(xiàn)。

倒計時的核心算法是輸人的時間減去現(xiàn)在的時間，得出的剩余時間就是要顯示的倒計時時間，這需要把時間都轉(zhuǎn)化成時間戳(毫秒數(shù))來進行計算，把得到的毫秒數(shù)轉(zhuǎn)換為天數(shù)、小時、分數(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倒計時代碼|黑馬程序員web前端培訓高手班 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>
    // 倒計時函數(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 + '時' + m + '分' + s + '秒';
    }
    // 設置終止時間
    time = '2021-11-30 10:57:56';

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

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

代碼運行效果如下：

1637142146807_JavaScript倒計時.gif