JS倒计时效果（不积蛙步无以至千里不积小流无以成江海）

JS实现倒计时效果

js基础语法实现倒计时效果（需要手动刷新）

1. 核心算法：输入的时间减去现在的时间就是倒计时所剩余的时间，即倒计时，但是不能拿时分秒相减，比如05分减去25分，结果变负。
2. 用时间戳来做 用户输入时间总的毫秒数减去现在时间的总的毫秒数 得到的就是剩余时间的毫秒数
3. 把剩余时间总的毫秒数转换为天、时、分、秒（时间戳转换为时分秒）
4. 时间戳：获得Date 总的毫秒数 不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒
5. 转换公式如下

		d = parseInt(总秒数/60/60/24)；  计算天数
       	h = parseInt(总秒数/60/60 % 24)；  计算小时
        m = parseInt(总秒数/60 % 60)；  计算分数
       	s = parseInt(总秒数 % 60)；  计算秒数

• 具体代码如下

function countDown(Time) {
            var nowTime = +new Date();//返回的是当前时间总的毫秒数
            var inputTime = +new Date(Time);//返回的是用户输入时间总毫秒数
            var times = (inputTime - nowTime) / 1000;//times是剩余的时间总秒数
            var d = parseInt(times / 60 / 60 / 24);//天
            d = d < 10 ? '0' + d : d;
            var h = parseInt(times / 60 / 60 % 24);//小时
            h = h < 10 ? '0' + h : h;
            var m = parseInt(times / 60 % 60)//分
            m = m < 10 ? '0' + m : m;
            var s = parseInt(times % 60);//秒
            s = s < 10 ? '0' + s : s;
            return d + '天' + h + '时' + m + '分' + s + '秒';
        }
        alert(countDown('2021-12-12 18:00:00'));//调用函数

利用回调函数(setinterval)实现全自动倒计时效果

    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        //获取元素
        var hour = document.querySelector('.hour');//小时的黑色盒子
        var minute = document.querySelector('.minute');//分钟的黑色盒子
        var second = document.querySelector('.second');//秒钟的黑色盒子
        var inputTime = +new Date('2021-10-17 18:00:00');// 输入一个时间  
        //本质是利用时间戳  全局变量 每一次调用函数都需要用到
        countDown();//先调用这个函数 防止第一次刷新页面有空白
        //2.开启定时器
        setInterval(countDown, 1000);
        function countDown() {
            var nowTime = +new Date();//返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000;//times是剩余的时间总秒数
            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;
            console.log(Date());
        }

• 个人感觉javascript就是个逐渐增加的过程，在原本简单的代码的效果上利用各种各样的函数方法来实现各色的功能。这个小功能让我对js的理解又进步一个层面（代码虽然没什么两样），就像是一个从0到1的过程，希望以后可以从1逐渐做加法。