setInterval() 定时器实现一个简单的页面倒计时

页面倒计时效果代码分析：

1. 倒计时效果时不断变化的，因此需要setInterval() 定时器每次调用一次函数自动变化。
2. 四个盒子里面分别存放天 时 分 秒。
3. 四个盒子利用innerHTML放入计算得到的天数 小时 分钟 秒数。
4. 第一次执行也是间隔毫秒数，因此第一次刷新页面会有空白，解决方案是先调用一次倒计时函数。
5. 最好采用封装函数的方式，方便调用。

实现效果图：

技术难点：

• JS内置对象-------Date对象（Date() 是一个构造函数，必须使用new来调用创建我们的日期对象）
• 格式化获取日期-------天 时 分 秒的方法：需要先new Date() 对象然后再去获取
• Date总的毫秒数（时间戳）：获取的是当前距离1970年1月1日0点0分0秒0毫秒的毫秒数
• 用时间戳的概念对天数 小时 分钟 秒数进行转化：
  将来的时间戳 - 现在的时间戳 = 剩余的毫秒数
  将时间戳毫秒数转换为时分秒：=== 毫秒数/1000 = 总秒数
  天数：d = parseInt(总秒数/60/60/24)
  小时：h = parseInt(总秒数/60/60%24)
  分数：m = parseInt(总秒数/60%60)
  秒数：s = parseInt(总秒数%60)
• 获取的时间数字有个位数，可以判断如果获取的时间数字小于10就直接给其补0，如果大于或者等于10就直接输出即可
• 函数都是要有返回值return的，如果不return值最后函数返回的值会是undefined；

下面分享相关源代码：

HTML代码如下：

<div class="box">
        <div class="zi">距离国庆中秋假期，还有</div>
        <span class="day"></span> //天
        <span class="hour"></span> //时
        <span class="minute"></span> //分
        <span class="second"></span> //秒
    </div>

CSS代码如下：

<style>
        body {
            background-color: #ecd1d6;
        }
        
        span {
            display: inline-block;
            padding: 0 10px;
            height: 40px;
            background-color: #58a0ca;
            color: #fff;
            line-height: 30px;
            font-size: 30px;
            font-weight: 700;
            line-height: 40px;
            text-align: center;
            margin: 2px;
            border-radius: 5px;
        }
        
        .box {
            width: 377px;
            height: 500px;
            background-color: #ecd1d6;
            margin: 0 auto;
        }
        
        .box .day {
            background-color: #fff;
            color: #58a0ca;
            font-weight: 400;
        }

        .zi {
            font-size: 30px;
            font-weight: 700;
            margin-bottom: 50px;
            margin-top: 100px;
            text-align: center;
        }
    </style>

JS代码如下：

<script>
        var day = document.querySelector('.day');
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var inputTime = +new Date('2020-10-01 00:00:00'); //输入时间的时间戳 在这里修改时间
        countDown();// 我们先调用一次这个函数，防止第一次刷新页面有空白
        setInterval(countDown, 1000); //定时 每隔一秒调用一次函数

        //封装倒计时函数
        function countDown() {
            var nowTime = +new Date(); //当前时间的时间戳
            times = (inputTime - nowTime) / 1000; //毫秒转化为秒
            var d = parseInt(times / 60 / 60 / 24); //天数的获取
            d = d < 10 ? '0' + d : d; //小于10补0操作
            d = d + '天'; //把天这个字存放到显示时间的盒子里
            day.innerHTML = d; //把得到的时间放入计时的盒子里
            var h = parseInt(times / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;
            h = h + '时';
            hour.innerHTML = h;
            var m = parseInt(times / 60 % 60);
            m = m < 10 ? '0' + m : m;
            m = m + '分';
            minute.innerHTML = m;
            var s = parseInt(times % 60);
            s = s < 10 ? '0' + s : s;
            s = s + '秒';
            second.innerHTML = s;
            return d + '天' + h + '时' + m + '分' + s + '秒'; //必须有返回值
        }
    </script>