JS利用时间戳倒计时案例

我们在逛某宝,或者逛某东时,我们时常看到一个倒计时,时间一到就开抢,这个倒计时是如何做的呢?让我为大家介绍一下。
理性分析一下:
1.用将来时间减去现在时间就是剩余的时间
2.核心:使用将来的时间戳减去现在的时间戳
3.把剩余的时间转换为 天 时 分 秒

注意:通过时间戳得到的是毫秒,需要转换为秒在计算
转换公式:
d = parseInt(总秒数 / 60 / 60 / 24) 计算天数
h = parseInt(总秒数 / 60 / 60 % 24) 计算小时
m = parseInt(总秒数 / 60 % 60) 计算分数
s = parseInt(总秒数 % 60) 计算当前秒数

    // 封装时间
    function getTime() {
        // 获取当前的时间戳
        let now = +new Date()
        // 获取将来的时间戳
        let last = +new Date("2023-11-3 18:30:00")
        // 获取剩余的时间戳 记得转换为秒数
        let count = (last - now) / 1000
        // 转换为时分秒
        // h = parseInt(总秒数 / 60 / 60 % 24) 计算小时
        // m = parseInt(总秒数 / 60 % 60) 计算分数
        // s = parseInt(总秒数 % 60) 计算当前秒数
        let h = parseInt(count / 60 / 60 % 24)
        h = h < 10 ? "0" + h : h
        let m = parseInt(count / 60 % 60)
        m = m < 10 ? "0" + m : m
        let s = parseInt(count % 60)
        s = s < 10 ? "0" + s : s
        // 把时分秒写到对应的盒子里面
        document.querySelector("#hour").innerHTML = h
        document.querySelector("#minutes").innerHTML = m
        document.querySelector("#second").innerHTML = s
    }
    // 使用定时器
    setInterval(getTime,1000)

效果图:请添加图片描述
感谢大家的阅读,如有不对地方,可以向我提出,感谢大家!

  • 7
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值