js倒计时程序设计

我们都知道，倒计时在我们日常生活中是非常常见的，比如抢购倒计时，发射倒计时等等。那么倒计时究竟是怎样来实现的呢？接下来我来给大家用代码演示一遍。

大家先看下这段代码：

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); //天数            
            var h = parseInt(times / 60 / 60 % 24); //小时           
            var m = parseInt(times / 60 % 60); //分           
            var s = parseInt(times % 60); //秒
            return d + '天' + h + '时' + m + '分' + s + '秒';
        }
        console.log(countDown('2023-1-27 18:30:00'));
        var date = new Date;
        console.log(date); //现在时间

输出结果：

可以发现跟我们经常遇见的倒计时有一点不一样，到底哪里不一样呢，细心的朋友就会发现，当出现个位数时会在前面加0，比如01、02等等。那我们该如何让解决呢？

解决办法：

当然有办法，我们学过三元运算符，这里就派上用场了，有人会问为什莫不可以用if...else..语句呢？ai.当然可以，大家想想看，写if...else...语句大概需要几行代码，

var d = 20;
        if (d < 10) {
            console.log(d = '0' + d);
        }
        console.log(d);

大概需要3行代码，显得非常繁琐，接下来我们用三元运算符显示上面这行代码：

var d = 2;
        d < 10 ? '0' + d : d;
        console.log(d);

通过对比，我们很简单的就能对比出三元运算符比if...else...语句运用的代码更少。

完整代码展示：

//封装一个函数
function countDown(time) {
            var nowTime = +new Date(); //返回的是当前时间总的毫秒数
            var inputTime = +new Date(time); // 返回的是用户输入时间的总毫秒数
            var times = (inputTime - nowTime) / 1000; //times就是剩余时间的总的秒数，因为（inputeTime-nowTime)是毫秒，所以要除以1000.
            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 + '秒';
        }
        console.log(countDown('2023-1-27 18:30:00'));
        //将'2023-1-27 18:29:00'传给time
        var date = new Date;
        console.log(date); //现在时间

结果：

结果显示正常，就是我们想要的样子！