元旦倒计时是怎么实现？

最新推荐文章于 2025-05-10 22:30:50 发布

ybb_ymm

最新推荐文章于 2025-05-10 22:30:50 发布

阅读量228

点赞数

分类专栏： HTML5 文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/ybb_ymm/article/details/128911895

版权

HTML5 专栏收录该内容

4 篇文章

订阅专栏

引言

我们日常开发中经常会遇到某个特定日期为终点，进行倒计时计算。

首先，获取终点日期，为基准，然后获取他的time信息。

在去确定时分秒对应的倍数。获取一天的时间信息

然后，获取今天的日期，在通过今天的日期得到time信息。

终点日期和当前日期的time信息的差值作为我们的倒计时信息基准。

最后在计算倒计时的、天、时、分、秒信息。

具体的计算过程的逻辑则是，

日为时间差/一天的时间信息。然后将计算得到的值赋值给我们html的页面需要展示的span内

小时的计算公式则是，通过时间差% 一天的时间信息得到的结果/一小时的信息，然后在将计算的结果值赋值给我们的html的页面需要展示的span内

分的计算公式则是，通过时间差% 一小时的时间信息得到结果 / 一分钟的信息，然后在将计算的结果赋值给我们的html页面需要展示的span内

秒的计算公式则是，通过时间差% 一分钟的时间信息得到结果 / 一秒钟的信息，然后在将计算的结果赋值给我们的html页面需要展示的span内

逻辑先搞到这，我们来看一下详细的代码。

具体代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>元旦倒计时</title>
</head>
<body>
从现在计算就，距离2023年元旦还有<span id="days"></span>天<span id="hours"></span>小时<span id="minutes"></span>分钟<span id="seconds"></span>秒
</body>
<script type="text/javascript">

    var yd_date = new Date("01/01/2023");
    var yd_time = yd_date.getTime();
    var one_second = 1000;
    var one_minute = one_second * 60;
    var one_hour = one_minute * 60;
    var one_day = one_hour * 24;

    getRemainTime();
    function getRemainTime(){

        var now_date = new Date();
        var now_time = now_date.getTime();
        var now2yd_time = yd_time - now_time;

        if(now2yd_time < 0){
            alert("请修改未来时间");
        } else {
            setInterval(getRemainTime,1000);
        }

        var days = now2yd_time / one_day;
        document.getElementById("days").innerHTML = parseInt(days);

        var hours = (now2yd_time % one_day) / one_hour ;
        document.getElementById("hours").innerHTML = parseInt(hours);

        var minutes = (now2yd_time % one_hour) / one_minute ;
        document.getElementById("minutes").innerHTML = parseInt(minutes);

        var seconds = (now2yd_time % one_minute) / one_second ;
        document.getElementById("seconds").innerHTML = parseInt(seconds);
    }

</script>
</html>

好了，今天关于元旦倒计时过程先到这，欢迎大家留言交流。

也欢迎大家关注我的公众号《coder练习生》