用setInterval()定时器实现倒计时

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


前言

今天写一个倒计时案例

一、案例思路

  • 倒计时是不断变化的,因此需要定时器来完成自动变化的效果;
  • 写一个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>

效果如下图所示:
在这里插入图片描述


总结

本次案例主要就是将剩余的时间分别给天、时、分、秒四个盒子,然后每隔一秒钟调用countDown()函数,页面将每隔一秒获得最新的时间,从而实现倒计时的效果。

  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值