用js在页面上写一个倒计时

最新推荐文章于 2025-09-17 22:00:55 发布

原创最新推荐文章于 2025-09-17 22:00:55 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js #前端

应用专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在前端项目中使用JavaScript实现倒计时功能。通过HTML设置时间显示元素，然后利用JavaScript的countTime方法计算剩余时分秒，并动态更新页面显示。记得在倒计时结束后清除定时器。

我在自己的项目中是这么做倒计时的

1）html代码 time1,time2,time3分别是用来显示时、分、秒的

                    <div class="countTime">
                                <span id="time1">1</span>
                                <i>:</i>
                                <span id="time2">2</span>
                                <i>:</i>
                                <span id="time3">3</span>
                              </div>

2）js代码 countTime倒计时方法计算距离结束时间的时分秒，然后通过innerHTML获取元素的内容，并将其回显到页面上；别忘记清除定时器

function countTime() { //倒计时
    var startTime = new Date().getTime();
    var endTime = new Date('2020-11-17 00:00:00').getTime();
    var time = endTime - startTime;
    // alert(time)
    setInterval(function() {
        var day = Math.floor(time / 1000 / 60 / 60 / 24);
        var hours = Math.floor(time / 1000 / 60 / 60 % 24);
        var minutes = Math.floor(time / 1000 / 60 % 60);
        var second = Math.floor(time / 1000 % 60);
        // console.log(hours + "小时");
        // console.log(minutes + "分钟");
        // console.log(second + '秒');
        document.getElementById('time1').innerHTML = hours;
        document.getElementById('time2').innerHTML = minutes;
        document.getElementById('time3').innerHTML = second;
        time -= 1000;
    }, 1000)
    if (time == 0) {
        clearInterval(time); //如果时间差为0，则清除定时器
    }
}