例子

1.倒计时

<p id="app">
        10:10:00
    </p>
    <script>
        function handleTime(value) {
            if (value < 10) {
                return "0" + value;
            }
            return "" + value;
        }
        function showTime() {
            var app = document.getElementById("app")
            var endTime = "2020-12-01 16:50:00";
        /* 1.获取结束时间的毫秒 */;
            endTime = new Date(endTime).getTime();
            /* 2.获取当前时间的毫秒 */
            var nowTime = new Date().getTime();
            /* 3.获取他们之间的差 */
            var gapTime = endTime - nowTime;
            /* 4.将他们的差转换为时分秒 */
            var seconds = Math.floor(gapTime / 1000);
            var hours = handleTime(Math.floor(seconds / 3600));
            seconds = seconds % 3600;
            var minutes = handleTime(Math.floor(seconds / 60));
            seconds = handleTime(seconds % 60);
            var sum = hours + ":" + minutes + ":" + seconds;
            app.innerHTML = sum;
        }
        showTime();
        setInterval(function(){
            showTime();

2.动态时钟

<div id="app">
        <img src="images/0.png" alt="">
        <img src="images/0.png" alt="">
        <span>:</span>
        <img src="images/0.png" alt="">
        <img src="images/0.png" alt="">
        <span>:</span>
        <img src="images/0.png" alt="">
        <img src="images/0.png" alt="">
    </div>
    <script>
        function handleTime(value) {
            if (value < 10) {
                return "0" + value;
            }
            return "" + value;
        }
        function showTime() {
            var imgs = document.querySelectorAll("#app img")
            var d = new Date();
            var hours = handleTime(d.getHours());
            var minutes = handleTime(d.getMinutes());
            var seconds = handleTime(d.getSeconds());
            var sum = hours + minutes + seconds;
            for (var i = 0; i < imgs.length; i++) {
                // imgs[i].src = "images/" + sum[i] + ".png";
                imgs[i].src = `images/${sum[i]}.png`;
            }
            setTimeout(function(){
                showTime()
            },1000)
        }
        showTime()
    </script>