js倒计时

最新推荐文章于 2024-05-21 23:21:19 发布

乐乐好痛苦

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量49

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_46186102/article/details/121241310

版权

倒计时原理

1.未来时间 - 当前时间 = 毫秒数

2.将毫秒数转换成：xx天xx小时xx分钟xx秒

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>距离过年还有：xx天xx小时xx分xx秒</h1>

    <script>
        // 倒计时原理
        // 未来时间 - 当前时间 = 毫秒数
        // 将毫秒数转换成： 天 小时 分钟 秒

        var h1 = document.querySelector('h1');
        var d1 = new Date(2022, 10, 23, 14, 13, 1)//未来时间
        auto();
        var timer = setInterval(auto,1000);
        function auto() {
            var d2 = new Date();//当前时间
            var d = Math.floor((d1 - d2) / 1000);
            console.log(d);

            if (d <= 0) {
                clearInterval(timer);
                h1.innerHTML = '新年快乐';
                return;
            }

        var day = Math.floor(d / 86400);
        var h = Math.floor(d % 86400 / 3600);
        var m = Math.floor(d % 3600 / 60);
        var s = d % 60;

        h1.innerHTML = '距离过年还有：' + day + '天' + h + '小时' + m + '分' + s + '秒';
        }
    </script>


</body>

</html>

乐乐好痛苦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js倒计时

倒计时原理1.未来时间 - 当前时间 = 毫秒数2.将毫秒数转换成：xx天xx小时xx分钟xx秒<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d
复制链接

扫一扫