JavaScript實現倒計時效果

實現思路：

1. 調用顯示剩余時間函數，具體見countDown(time)
2. 使用定時器setInterval(countDown, 1000)，每隔一秒調用一次，即每秒刷新一次剩余時間，實現倒計時的動態效果

代碼實現：

HTML:

<div>
    <span class="day">1</span>
    <span class="hour">2</span>
    <span class="minute">3</span>
    <span class="second">4</span>
</div>

CSS:

div {
    margin: 200px;
}

span {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #333;
    font-size: 20px;
    color: #fff;
    text-align: center;
    line-height: 40px;
}

JS:

// 1. 獲取元素 
var day = document.querySelector('.day'); // 天數小盒子
var hour = document.querySelector('.hour'); // 小時小盒子
var minute = document.querySelector('.minute'); // 分鍾小盒子
var second = document.querySelector('.second'); // 秒數小盒子
var inputTime = +new Date('2020-10-13 11:00:00'); // 設定倒計時截至時間為2020-10-13 11:00:00
countDown(); // 我們先調用一次這個函數，防止第一次刷新頁面有1秒的空白

// 2. 開啟定時器，每隔1秒調用一次
setInterval(countDown, 1000);

function countDown() {
    var nowTime = +new Date();
    var times = (inputTime - nowTime) / 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 ? '0' + s : s;
    second.innerHTML = s; // 把剩余的秒數給 秒數小盒子
}

實現效果：

當前時間為2020-10-11 9:15左右
倒計時：