实现倒计时 JavaScript（定时器 setInterval）

提拉米苏爱拿铁

已于 2022-04-12 13:27:22 修改

阅读量1k

点赞数

分类专栏： JS 文章标签： javascript html5 css

于 2022-04-12 13:26:58 首次发布

本文链接：https://blog.youkuaiyun.com/m0_50789696/article/details/124121788

版权

JS 专栏收录该内容

8 篇文章

订阅专栏

本文展示了如何使用JavaScript实现一个实时倒计时功能，精确计算到国庆节的剩余天数、小时、分钟和秒数。通过获取当前时间并计算与指定日期之间的差距，动态更新页面上的时间显示。

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

1 运行结果

2 JavaScript 代码

<script>
    //1.获取元素
    var day = document.querySelector('.day');
    var hour = document.querySelector('.hour');
    var minute = document.querySelector('.minute');
    var second = document.querySelector('.second');
    var inputTime = +new Date('2022-10-1 00:00:00');
    //先调用一次函数，防止刷新空白
    countDown();
    //开启定时器：每隔一秒调用一次
    setInterval(countDown, 1000);
    //2.定义回调函数
    function countDown() {
        //获取当前时间的时间戳（毫秒）
        var nowTime = +new Date();
        // console.log(date);
        //times 剩余时间总的秒数 
        var times = (inputTime - nowTime) / 1000;
        var s = parseInt(times % 60);
        s = s < 10 ? '0' + s : s;
        second.innerHTML = s;
        var min = parseInt(times / 60 % 60);
        min = min < 10 ? '0' + min : min;
        minute.innerHTML = min;
        var h = parseInt(times / 60 / 60 % 24);
        h = h < 10 ? '0' + h : h;
        hour.innerHTML = h;
        var days = parseInt(times / 60 / 60 / 24);
        day.innerHTML = days;
    }

</script>

3 HTML结构

<body>
    <div>
        <p>距离国庆还有</p>
        <span class="day"></span>天
        <span class="hour"></span>时
        <span class="minute"></span>分
        <span class="second"></span>秒
    </div>
</body>

4 CSS 样式

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    div {
        height: 125px;
        width: 270px;
        margin: 100px auto;
        padding: 10px;
        background-color: coral;
        text-align: center;
    }

    p {
        display: block;
        font-size: 25px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 20px;
    }

    span {
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: #555;
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        line-height: 40px;
    }
</style>