JSFiddle - React, Tailwind, and code Playground

by Joseph Chiang

HTML

<div class="mod">
    <p>There are <em id="sec">100</em> seconds left.</p>
</div>

CSS

.mod #sec {color: red;}

JavaScript

// setInterval(<要執行的函式>, <每 N 毫秒執行一次>);
window.timer = setInterval(function () {
    // 取得此 DOM 節點的元素
    var el = document.getElementById("sec");
    // 以 innerHTML 取得此元素的內容
    sec = el.innerHTML;
    // 內容是字串、需要透過 parseInt 轉為數字
    // 將目前的秒數減 1
    sec = parseInt(sec) - 1;
    // 以 innerHTML 再度塞回去此元素中
    el.innerHTML = sec;
    // 若目前秒數為 0
    if (sec === 0) {
        // 則透過 clearInterval 停止此計時器
        clearInterval(window.timer);
    }
}, 1000);