javascript實現簡單倒計時效果

本文例項為大家分享了實現倒計時效果的具體程式碼，供大家參考，具體內容如下

實現思路：

1、頁面建立好天、小時、分、秒的標籤元素，定義好樣式
2、獲取天、小時、分、秒的元素物件，方便後面給它們賦值- - -剩餘時間
3、定義一個計算當前時間和設定時間- - -時間差的函式，將剩餘天數、小時、分、秒分別計算計算出來，並賦值給相應的與元素內容
4、使用setInterval()函式，設定每隔1秒執行一次時間差函式，
5、注意setInterval()函式之前，先呼叫一次時間差函式，不然重新整理頁面時會出現一下標籤中寫的原始內容，然後再出現計算出的時間差

程式碼示例：

<!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>倒計時效果<lSsjDX 
/title>
    <style>
        div {
            margin: 200px;
        }
        
        span {
            display: block;
            float: left;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            margin: 5px;
            color: #fff;
            background-color: rgba(0,.8);
        }
    </style>
</head>

<body>
    <div class="time">
        <span class="day">0</span>
        <span>天</spwww.cppcns.com 
an>
        <span class="hour">1</span>
        <span>小時</span>
        <span class="minute">2</span>
        <span>分</span>
        <span class="second">3</span>
        <span>秒</span>;
    </div>
    <script>
        var day = document.querySelector('.day');
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');

        var setTime = +new Date('2021-10-1 09:00:00');
        countDown();
        setInterval(countDown,1000);

        console.log(+new Date());

        function countDown() {
            var now = +new Date();
            var times = (setTime - now) / 1000;
            var  
d = parseInt(times / 60 / 60 / 24); //天
            d = d < 10 ? '0' + d : d;
            day.innerHTML = d; //把剩餘的天給 天盒子
            var h = parseInt(times / 60 / 60 % 24); //時
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; //把剩餘的小時給 小時盒子
            var m = parseInt(times / 60 % 60); //分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m; //把剩餘的分給 分盒子
            var s = parseInt(times % 60); //秒
            s = s < 10 ? '0www.cppcns.com' + s : s;
            second.innerHTML = s; //把剩餘的秒給 秒盒子
        }
    </script>
</body>

</html>

注意：setInterval呼叫函式這裡只寫函式名，不要在函式裡寫引數，寫了引數可能不會迴圈執行，
例如：setInterval(countDown,1000);
嘗試過寫setInterval(countDown(+new Date(‘2021-10-1 09:00:00')),1000);
function countDown(setTime) {、、、}
這樣寫後setInterval失去迴圈執行函式效果，不能產生倒計時效果，每次重新整理頁面才會變化一次

頁面效果：

javascript實現簡單倒計時效果

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

javascript實現簡單倒計時效果

實現思路：

程式碼示例：

頁面效果：

javascript實現簡單倒計時效果

JavaScript實現簡單日曆效果

JavaScript實現簡單倒計時

JavaScript實現前端倒計時效果

javascript實現簡單放大鏡效果

利用JavaScript實現春節倒計時效果(移動端和PC端)

JavaScript實現簡單貪吃蛇效果

JavaScript實現簡單進度條效果

JavaScript實現簡單的彈窗效果

javascript實現簡單頁面倒計時

JavaScript實現簡單的輪播圖效果

JavaScript實現簡單拖拽效果

JavaScript實現簡單的拖拽效果

JavaScript實現簡單的計算器

JavaScript實現滑動門效果

JavaScript實現Excel表格效果

iOS實現簡單抽屜效果

js實現簡單放大鏡效果

JavaScript實現拖拽效果

JavaScript實現簡單計算器

javascript實現簡單倒計時效果

實現思路：

程式碼示例：

頁面效果：

相關推薦