使用js实现 自动更新倒计时功能

效果图如下：

1、搭建结构

根据效果图，可知分为上（h1）下（div）两部分，倒计时部分，由4个框组成，故使用span进行包裹

距离光棍节，还有
    
         天
         时
         分
         秒
    

2、表现：好看的外观

 
        .box {
            width: 500px;
            height: 45px;
            margin: 0 auto;
        }
        
        .box strong {
            background: orange;
            color: #fff;
            line-height: 49px;
            font-size: 36px;
            font-family: Arial;
            padding: 0 10px;
            margin-right: 10px;
            border-radius: 5px;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
        }
        
        .box>span {
            float: left;
            line-height: 50px;
            color: orange;
            font-size: 32px;
            margin: 0 10px;
            font-family: Arial, Helvetica, sans-serif;
        }
        
        .title {
            width: 260px;
            height: 50px;
            margin: 200px auto 20px auto;
        }
    

3、行为：自动更新倒计时功能

        // 获取元素 天 时 分 秒 的盒子
        var day = document.querySelector('.day');
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        // 目标时间的时间戳  用户可以填写目标时间
        var inputTime = +new Date('2021-11-11 00:00:00');
        countdown();
        // 开启定时器  每1秒钟 执行一次countdown函数
        setInterval(countdown, 1000);
        // 获取时间函数
        function countdown() {
            // 实例化 Date 对象，获取当前总毫秒数
            var nowTime = +new Date();
            // 计算 目标事件与当前时间的差值，并换算为秒  1s=1000ms
            var times = (inputTime - nowTime) / 1000;
            // 天
            var d = parseInt(times / 60 / 60 / 24);
            d = d