JS倒计时

最新推荐文章于 2024-12-03 11:08:57 发布

qq_46615920

最新推荐文章于 2024-12-03 11:08:57 发布

阅读量109

点赞数

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/qq_46615920/article/details/109224556

版权

笔记专栏收录该内容

11 篇文章

订阅专栏

这段代码展示了如何使用JavaScript在网页上实现一个从当前时间到指定时间的倒计时功能。通过获取当前日期和设定的结束日期进行计算，动态更新剩余的天数、小时、分钟和秒数。倒计时的更新频率为每秒一次。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>
    <p id="p"></p>
    <script>
       let p = document.getElementById("p");
       setInterval(function () {
            var nowtime = new Date();

            let year = nowtime.getFullYear();
            let month = nowtime.getMonth() + 1;
            let days = nowtime.getDate();
            let a = year + '/' + month + '/' + days;
            var endtime = new Date(a + " 19:00:00");

            //总共需要的秒数
            var seconds = parseInt((endtime - nowtime) / 1000)
            //需要的天数
            var day = fn(parseInt(seconds / 3600 / 24));   
            //需要的小时
            var hou = fn(parseInt(seconds / 3600 % 24));
            //需要多少分
            var sec = fn(parseInt(seconds / 60 % 60));
            //需要的毫秒
            var mil = fn(parseInt(seconds % 60));
            console.log(typeof day)

            if(day == "00"){
                p.innerHTML = hou + "小时" + sec + "分" + mil + "秒"
            }else{
                p.innerHTML = day + "天" + hou + "小时" + sec + "分" + mil + "秒"
            }
            
        }, 1000)
        function fn(num) {       
            if (num < 10) {
                return "0" + num
            } else {
                return num
            }
        }
    </script>
</body>

</html>