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

乌秋

已于 2023-04-09 17:41:03 修改

阅读量618

点赞数 4

文章标签： javascript html css

于 2023-04-09 17:38:26 首次发布

本文链接：https://blog.csdn.net/weixin_46372993/article/details/130043779

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
- 今天写一个倒计时案例
一、案例思路
二、代码
总结

前言

今天写一个倒计时案例

一、案例思路

倒计时是不断变化的，因此需要定时器来完成自动变化的效果；
写一个countDown()倒计时函数，用innerHTML在四个盒子里放入对应的时间，分别对应为天、时、分、秒；
先调用countDown()倒计时函数，防止刚开始刷新页面出现空白。

二、代码

html代码

<body>
    <div class="countdown">
        <span class="number" id="days">00</span>
        <span class="label">天</span>
        <span class="number" id="hours">00</span>
        <span class="label">小时</span>
        <span class="number" id="minutes">00</span>
        <span class="label">分钟</span>
        <span class="number" id="seconds">00</span>
        <span class="label">秒</span>
    </div>

</body>

css代码

<style>
    .countdown {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.2rem;
        font-weight: bold;
    }

    .number {
        display: inline-block;
        width: 3rem;
        height: 3rem;
        line-height: 3rem;
        text-align: center;
        background-color: #000;
        color: #fff;
        border-radius: 0.5rem;
        margin: 0 0.5rem;
    }
    
    .label {
        margin: 0 0.5rem;
    }
</style>

js代码

<script>
    //获取元素
    var days = document.getElementById('days');
    var hours = document.getElementById('hours');
    var minutes = document.getElementById('minutes');
    var seconds = document.getElementById('seconds');
    var inputTime = +new Date('2023-4-9 18:54:00');    //返回用户输入时间的总毫秒数
    countDown();
    //开启定时器
    setInterval(countDown, 1000);
    //倒计时
    function countDown(time) {
        var nowTime = +new Date();   //当前系统时间总毫秒数
        var times = (inputTime - nowTime) / 1000;    //剩余时间总毫秒数
        //天
        var day = parseInt(times / 60 / 60 / 24);
        day = day < 10 ? '0' + day : day;
        days.innerHTML = day;
        //时
        var hour = parseInt(times / 60 / 60 % 24);
        hour = hour < 10 ? '0' + hour : hour;
        hours.innerHTML = hour;
        //分
        var minute = parseInt(times / 60 % 60);
        minute = minute < 10 ? '0' + minute : minute;
        minutes.innerHTML = minute;
        //秒
        var second = parseInt(times % 60);
        second = second < 10 ? '0' + second : second;
        seconds.innerHTML = second;
    }

    </script>