js如何实现倒计时功能?

最新推荐文章于 2022-03-20 20:27:12 发布

weixin_45070265

最新推荐文章于 2022-03-20 20:27:12 发布

阅读量187

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45070265/article/details/107815531

版权

javascript 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        距离8月1日还有XXX天XX小时XX分钟XX秒
    </div>
    <script>
        // 封装一个自动补零的函数
        function buling(time){
            if(time<10){
                time='0'+time
            }
            return time
        }

        function setTime() {

            // 获取当前时间
            let curTime = new Date()

            // 获取将来时间
            let fuTime = new Date('2020-10-01 17:57:00')

            // 获取时间差
            let timeDiff = fuTime - curTime

            // 判断时间差
            if (timeDiff >= 0) {
                // 距离当前的天数
                let day = Math.floor(timeDiff / 1000 / 60 / 60 / 24)

                // 距离当前剩余小时
                let hour = Math.floor(timeDiff / 1000 / 60 / 60 % 24)
                hour = buling(hour)
                
                // 距离当前剩余分钟
                let minute = Math.floor(timeDiff / 1000 / 60 % 60)
                minute = buling(minute)

                // 剩余秒
                let second = Math.floor(timeDiff / 1000 % 60)
                second = buling(second)

                // 插入网页
                box.innerHTML = ` 距离10月1日还有${day}天${hour}小时${minute}分钟${second}秒 `
            }

        }

        // 立即执行一次
        setTime()

        // 定时器,每秒执行一次
        setInterval(setTime, 1000)

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

weixin_45070265

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js如何实现倒计时功能?

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="b
复制链接

扫一扫