使用js定时器实现倒计时功能

最新推荐文章于 2023-11-14 10:56:21 发布

mini_055

最新推荐文章于 2023-11-14 10:56:21 发布

阅读量1.3k

点赞数 1

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/m0_61480985/article/details/127600455

版权

先看看效果图：

倒计时使用的技术主要就是js中的定时器。

首先还是先理一下思路，先要确定一个具体的时间，你想从哪个时间到哪个时间，我这个就是从现在的时间到2022年过年，然后使用data对象获取天、小时、分钟、秒，之后再使用定时器让它像上图一样能够一直保持运动的状态。

new data()表示的是当前时间，也就是电脑上的时间，如果前面有个+，表示的当前时间的毫秒，转换为毫秒了。

举个例子：

var date1 = new Date();   
var date2 = +new Date();
console.log(date1)
console.log(date2)

结果如下：

程序代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body{
                background-color: black;
            }
            #div{
                width: 600px;
                height: 100px;
                margin: 100px auto;
                font-size: 24px;
                /* 设置颜色 */
                background-color:rgba(128, 128, 128, 0.4);
                color:chartreuse;
                /* 边框圆角 */
                border-radius: 10px;
                /* 设置文字居中 */
                text-align: center;
                line-height: 100px;

            }   
        </style>
    </head>
    <body>
        <div id="div">
        </div>
        <script>
            // 获取div
            var div = document.getElementById('div');
            // 先调用一次函数，如果不调用刷新的时候会有一点时间显示的是空白
            count();
            // 定时器
            //=>箭头函数，是ES6新增的函数，表示一个匿名函数
            // =>前面是参数，后面是函数
            setInterval(() =>count() , 1000);

            // 封装函数，计算倒计时
            function count(){
                var dateNow = +new Date();//当前时间的毫秒数
                var date2 = +new Date('2023/1/22 00:00:00')//截止时间的毫秒数
    
                var cha = date2 - dateNow;//截止时间减去当前时间的毫秒
    
                // 计算天时分秒
                tian = parseInt(cha / (24 * 3600 * 1000)) //天数 1s = 1000ms
                var yu1 = cha % (24 * 3600 * 1000) //余数
    
                hours = parseInt(yu1 / (3600 * 1000)) //小时
                var yu2 = yu1 % (3600 * 1000)
    
                minutes = parseInt(yu2 / (60 * 1000)) //分钟
                var yu3 = yu2 % (60 * 1000);
    
                seconds = parseInt(yu3 / 1000) //秒
                // 输出 ${}字符串拼接
                div.innerHTML = `现在距离2022年春节还有:
                ${tian}天，${hours}小时，${minutes}分，${seconds}秒`
                }         

        </script>
    </body>
</html>

css部分我是自己加了一点样式，如果想要简单的也可以不加样式，或者自己改一下样式就可以了。

还需要注意的一点是截止时间是阳历的时间，因为获取的当前时间是阳历的，所以截止时间也是阳历的，这点需要注意。

mini_055

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
使用js定时器实现倒计时功能

首先还是先理一下思路，先要确定一个具体的时间，你想从哪个时间到哪个时间，我这个就是从现在的时间到2022年过年，然后使用data对象获取天、小时、分钟、秒，之后再使用定时器让它像上图一样能够一直保持运动的状态。new data()表示的是当前时间，也就是电脑上的时间，如果前面有个+，表示的当前时间的毫秒，转换为毫秒了。还需要注意的一点是截止时间是阳历的时间，因为获取的当前时间是阳历的，所以截止时间也是阳历的，这点需要注意。倒计时使用的技术主要就是js中的定时器。
复制链接

扫一扫