JavaScript实现秒杀倒计时效果（附源码）

正文

整体效果如图

HTML结构如下：

<div class="box">
        <span class="hour">1</span>
        :
        <span class="minute">2</span>
        :
        <span class="second">3</span>
    </div>

大盒子装着三个小盒子，小盒子1、2、3依次为时、分、秒

js代码

<script>
    // 1.获取元素
    var hour = document.querySelector('.hour');          //小时的盒子
    var minute = document.querySelector('.minute');     //分钟的盒子
    var second = document.querySelector('.second');     //秒数
    var inputTime = +new Date('2020-8-15 18:00:00');   //返回的是用户输入时间总的毫秒数
    console.log(inputTime);
    countDown();  //我们先调用一次这个函数，防止第一次刷新页面有空白
    // 2.开启定时器
    setInterval(countDown,1000);
    function countDown() {
        var nowTime = +new Date();   //返回的是当前时间总的总的毫秒数
        var times = (inputTime - nowTime) /1000;  //times是剩余的总的秒数
        var h = parseInt(times / 60 / 60 % 24);    //时
        h = h < 10 ? '0' + h : h;
        hour.innerHTML = h;   //把剩余的小时 给小时的盒子
        var  m = parseInt(times / 60 % 60);  //分
        m = m < 10 ? '0' + m : m;
        minute.innerHTML = m;
        var s = parseInt(times % 60);   //当前的秒
        s = s < 10 ? '0' + s : s;
        second.innerHTML = s;
    }

    
</script>

inputTime设置目标时间

设置一个定时器，每1000毫秒（也就是1秒）执行一次countTime函数，countTime函数获取当前时间再，将目标时间减去当前时间就是倒数时间，再对该时间进行具体操作

页面一开启就打开定时器