1. 倒计时

    <p id="time">2020-12-01 16:50:00</p>
    <script>
        var endTime = "2020-12-01 16:50:00";
        var p = document.getElementById("time");
        function showTime(endTime){
            endTime = new Date(endTime).getTime();
            var nowTime = new Date().getTime();
            var gapTime = endTime - nowTime;
            var allSeconds = Math.floor(gapTime/1000);
            var hours = Math.floor(allSeconds/3600);
            var minutes = Math.floor(allSeconds%3600/60);
            var seconds = Math.floor(allSeconds%60);
            // console.log(allSeconds);
            // console.log(hours);
            // console.log(minutes);
            // console.log(seconds);
            var countdown = String(hours)+":"+String(minutes)+":"+String(seconds);
            console.log(countdown);
            return countdown;
        }
        setInterval(function(){
            p.innerHTML = showTime(endTime);
        },1000)
    </script>

2. 实况闹钟

    <div class="time">
        <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>
        var img = document.querySelectorAll(".time img");
        function showTime(){
            // 获取时间，时分秒。
            var nowTime = new Date();
            var hours = nowTime.getHours();//时
            var minutes = nowTime.getMinutes();//分
            var seconds = nowTime.getSeconds();//秒
            // 拼接成一个字符串
            var countdown = num(hours)+num(minutes)+num(seconds);
            // 将每一个图片路径设置对应的数字。
            for(let i=0;i<img.length;i++){
                    img[i].src = `images/${countdown[i]}.png`;
                    console.log('img[i]: ', img[i]);
            }
            // 回调函数超时调用
            setTimeout(function(){
                console.log(countdown);
                showTime();
            },1000)
        }
        showTime()

        // 一位数补零，并且转化为字符串
        function num(num){
            if (num<10){
                return num= "0"+num;
            }
            return num =num+"";
        }
    </script>