首頁技術(shù)文章正文

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

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

IT培訓(xùn)班

在一些電商網(wǎng)站的活動頁上會經(jīng)常出現(xiàn)折扣商品的倒計時標記,顯示離活動結(jié)束還剩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前端培訓(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>
    // 倒計時函數(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 + '秒';
    }
    // 設(shè)置終止時間
    time = '2021-11-30 10:57:56';

    //  設(shè)置定時器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行代碼是設(shè)置活動的結(jié)束時間戳。第4行代碼計算剩余毫秒數(shù),需要轉(zhuǎn)換為秒數(shù),轉(zhuǎn)換規(guī)則為1秒/1000毫秒。第5~13行代碼計算天數(shù)小、小時h、分時m、秒數(shù)s,并使用return返回。 第16行代碼輸出距離指定結(jié)束日期2021-11-30 10:57:56還剩多少時間。

代碼運行效果如下:

1637142146807_JavaScript倒計時.gif



猜你喜歡

Math對象的常用方法有哪些?如何使用?

JavaScript中l(wèi)et和var和const有什么區(qū)別?

javascript開發(fā)工具有哪些?

黑馬程序員HTML&JS+前端課程

分享到:
在線咨詢 我要報名
和我們在線交談!