JS实现倒计时秒杀

【前言】生活中我们常常会看到一些倒计时的场景，例如商品的秒杀、闹钟等场景，都是利用倒计时来实现。因此我萌生了自己利用原生JS写一个倒计时的想法，希望能给大家带来帮助。

实现效果图

实现步骤

1. 创建时间对象，获取当前系统时间，并转化为时间戳：

let now = +new Date()

2. 定义一个倒计时结束时间：

let end = +new Date('2022-04-14  20:00:00')

3. 结束时间与系统当前时间做差：

let jetLag = (end - now) / 1000;

• 由于将系统当前时间和结束时间都转化为了时间戳计算，但得到的结果为毫秒，单位换算除1000得到秒。

4. 得到时、分、秒：

//得到时
let h = parseInt(jetLag / 60 / 60)
//得到分
let m = parseInt(jetLag / 60 % 60)
//得到秒
let s = parseInt(jetLag % 60)

5. 封装函数在定时器中循环调用执行倒计时：

setInterval(function () {
    fn()
}, 1000)

5. 将时、分、秒通过模版字符串渲染到页面上

完整代码

<script>
    function fn() {
        //当前系统时间
        let now = +new Date()
        //结束时间
        let end = +new Date('2022-04-14  20:00:00')
        //时间做差,得到毫秒,/1000得到秒
        let jetLag = (end - now) / 1000;
        //得到时
        let h = parseInt(jetLag / 60 / 60)
        //得到分
        let m = parseInt(jetLag / 60 % 60)
        //得到秒
        let s = parseInt(jetLag % 60)
        let div1 = document.querySelector('.time_box1')
        div1.innerHTML = `${h}`
        let div2 = document.querySelector('.time_box2')
        div2.innerHTML = `${m}`
        let div3 = document.querySelector('.time_box3')
        div3.innerHTML = `${s}`
    }
    fn()
    setInterval(function () {
        fn()
    }, 1000)
</script>