简单地运用JS的date对象实例，实现倒计时功能。

效果图：
代码及详细注释：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #font-text {
            color: #409EFF;
            font-size: 30px;
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <div id="font-text"></div>
    <script type="text/javascript">
        //1.定义一个countDown功能函数（实现倒计时的功能）
        function countDown() {
            const deadline = new Date("2020/11/11 00:00:00")//设置具体的截止时间,以双十一为例子
            let currentTime = new Date();//通过new一个Data日期对象实例，获取当前的时间
            //下面这行代码，用于计算倒计时的时差，用我们设置的具体时间减去当前标准时间，算出的时差间隔就是我们的倒计时
            intervalTime = deadline.getTime() - currentTime.getTime()
            //console.log(intervalTime)//我们可以尝试下打印，发现打印出的是1970/1/1格林尼治距今的时间戳
            if (intervalTime > 0) {//如果间隔时间>0，也就是双十一时间还没到，我们要干嘛
                //换算格林尼治时间（即时间戳）
                const day = Math.floor(intervalTime / 1000 / 60 / 60 / 24);//Math.floor方法向下取整
                const hour = Math.floor(intervalTime / 1000 / 60 / 60 % 24);
                const minute = Math.floor(intervalTime / 1000 / 60 % 60);
                const second = Math.floor(intervalTime / 1000 % 60);
                //下面这行代码是我们最终在页面实现的效果展示
                const showText = `距离今年的双十一狂欢节还有${day}天${hour}时${minute}分${second}秒`//这里用了ES6的字符串模板写法
                document.getElementById("font-text").innerHTML=showText;//输入到页面展示
            }else{//如果双十一倒计时的时间到了，这时候我们要实现什么功能呢？
                    clearInterval(timer);//首先关掉计时器
                    //在这里就可以实现我们的业务逻辑代码相关了（调用封装好的函数），比如发红包雨啊!              
                    document.getElementById("font-text").innerHTML="双十一已到，快点击红包雨吧！";
                }
        }
        
//下面的代码通过声明一个计时器，每秒钟调用一次我们的countDown功能函数，即实现了倒计时功能
    const timer = setInterval(()=>{
        countDown();
            },1000)
    </script>
</body>
</html>
最后编辑于：2020.10.26 21:32:37