JavaScript-205：倒计时效果

效果图

结构

    <div>
        <span class="day"></span>
        <span class="hour"></span>
        <span class="minute"></span>
        <span class="second"></span>
    </div>

CSS

        div span {
            margin: 0 auto;
            display: inline-block;
            background-color: rgb(87, 220, 50);
        }

        div {
            width: 300px;
            margin: 0 auto;
        }

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('2023-01-01 18:00:00');  // 返回的是用户输入的时间总毫秒数
        console.log(inputTime, 'inputTime');
        // 2.开启倒计时
        countDown();  // 先调用一次这个函数 防止第一次刷新页面有空白
        setInterval(countDown, 1000)
        // 封装倒计时
        function countDown ()
        {
            var nowTime = +new Date();  //  返回的是当前时间的总毫秒数
            var times = (inputTime - nowTime) / 1000; //times 是剩余时间的总毫秒数
            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; // 秒
        }