在一些電子商務網站的活動頁面常常會出現一些動態倒計時的效果元素,比如離活動開始還有xx小時xx分鐘xx秒,離活動結束還有xx小時xx分鐘xx秒等,并且時間是動態減少的,非常的引人注意。那么這篇文章就說一說,如何利用原生JS來實現動態倒計時的效果。

js實現倒計時-時分秒

HTML代碼

<span id="Mochu"></span>

JS代碼

<script type="text/javascript">
    window.onload = function countTime() {
        //獲取當前時間
        var date = new Date();
        var now = date.getTime();
        //設置截止時間
        var str = "2019/10/1 00:00:00";
        var endDate = new Date(str);
        var end = endDate.getTime();
        //時間差
        var leftTime = end - now;
        //定義變量 d,h,m,s保存倒計時的時間
        var d,h,m,s;
        d = Math.floor(leftTime/1000/60/60/24);
        h = Math.floor(leftTime/1000/60/60%24);
        m = Math.floor(leftTime/1000/60%60);
        s = Math.floor(leftTime/1000%60);
        if (leftTime>1) {
            //活動剩余時間
            document.getElementById("Mochu").innerHTML = "離活動結束還有:<span class='Mochu'> "+d+"</span> 天<span class='Mochu'> "+h+"</span> 時<span class='Mochu'> "+m+"</span> 分<span class='Mochu'> "+s+"</span> 秒";
        } else {
            //倒計時結束
            document.getElementById("Mochu").innerHTML = "<span class='Mochu'>活動已結束</span>";
        }
        setTimeout(countTime,1000);
    }
</script>

運行效果:

js動態倒計時代碼,js倒計時代碼

代碼理解:

var str = "2019/10/1 00:00:00":可以設置到期時間,比如2020/25/01 23:00:00 ,但要大于當前的時候。

setTimeout(countTime,1000):為多少時間執行一次countTime() 函數,用來重新計算時間,來更新DIV里面的內容

getTime():函數用于換取時間的時間戳,用于當前日期與結束日期進行比較

原生JS動態倒計時示例平臺 : 所有平臺  |  分類 : 編程開發  |  大小 : 0.1 MB