用Javascript實現倒計時效果

阿新 • • 發佈：2021-02-09

用Javascript實現倒計時效果

正在學習大前端中，有程式碼和思路不規範不正確的地方往多多包涵，感謝指教

在某些商城網站中，我們常常可以看見其網站或者app上有一個區域放的是倒計時，來用來提醒使用者還有多少時間將會發生什麼事情，下面我們用程式碼來對其進行實現

程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 
Title</title>
    <style>
        div {
            margin: 300px;
            border: 1px solid pink;
        }

        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: blue;
            font-size: 20px;
            color: 
 #fff;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>
<body>
<div>
    <span class="hour">1</span>
    <span class="minute">2</span>
    <span class="second">3</span>
< 
/div>
<script>
    var hours=document.querySelector('.hour')
    var min=document.querySelector('.minute')
    var sce=document.querySelector('.second')
    var inputTime=+new Date('2021-2-8 16:40:00')
    //countDown()//先1呼叫，防止第一次重新整理有空白
    //開啟定時器,這是等了1000ms後才開啟的定時器
    setInterval(countDown,1)
    function countDown() {
        var nowTime = +new Date(); // 返回的是當前時間總的毫秒數
        var times = (inputTime - nowTime) / 1000; // times是剩餘時間總的秒數
        var h = parseInt(times / 60 / 60 % 24); //時
        h = h < 10 ? '0' + h : h;
        hours.innerHTML = h; // 把剩餘的小時給 小時黑色盒子
        var m = parseInt(times / 60 % 60); // 分
        m = m < 10 ? '0' + m : m;
        min.innerHTML = m;
        var s = parseInt(times % 60); // 當前的秒
        s = s < 10 ? '0' + s : s;
        sce.innerHTML = s;
    }
</script>
</body>
</html>

演示效果：

在這裡插入圖片描述

時間一秒一秒得倒計時

程式碼解釋

這裡我把三個行內元素span放在了塊元素div裡面，由於行內元素不能改寬高，所以都換成行內塊元素。
這裡因為倒計時要修改的地方是三個span盒子，分別對應這小時，分鐘，秒數所以獲取這三個span的事件。然後用inputTime這個變數來接收我們的目的時間。
然後建立一個countDown為名字的函式。函式裡面用nowTime這個變數來接收當前的時間。因為接收到的時間是以毫秒為單位，所以用一個變數times來接收目的時間和現在時間的時間差，然後再除以1000，因為1s=1000ms，這裡就得到了剩餘的秒數。
用h表示剩餘的小時一天=24小時，一個小時=60分鐘，1分鐘=60s。所以這裡用總的秒數/60/60%24就得到了剩餘的小時數。然後為了讓樣式更好看，我們把顯示小數設定為兩位，這裡用的是三元運算子：小時小於10？如果小於就在前面+‘0’；如果大於10就只返回數字。並用h來進行接收，然後把h給hours這個盒子。下面的分鐘和秒數都是一樣的原理。
然後函式寫好了，我們再用定時器來呼叫這個函式，間隔時間為1/1000ms

別噴我，寫的不好就勞煩指點一二，覺得有幫助就留下個大拇指點個關注再走哈哈哈！

用Javascript實現倒計時效果