Js定时器实现某东倒计时秒杀效果（附源码）

有很多梦想要实现

已于 2023-03-20 01:17:11 修改

阅读量518

点赞数

分类专栏： Web 文章标签： css javascript html webstorm chrome Powered by 金山文档

于 2023-03-15 00:38:27 首次发布

本文链接：https://blog.csdn.net/weixin_45134711/article/details/129540891

版权

Web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

需求: J东倒计时,两个小时一场，与当下时间的倒计时。

效果图

Html+CSS设置

此处不做过多的赘述，详情看代码。

<style>
    * {
      margin: 0;
      padding: 0;
    }

    .countdown {
      width: 190px;
      height: 260px;
      margin: 0 auto;
      background: #E83632;
      background: url(http://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/img/4a15d8883775742e3efbb850ae14def7.png);
    }

    .countdown .title {
      color: #fff;
      font-size: 30px;
      text-align: center;
      font-weight: bold;
      padding-top: 30px;
    }

    .countdown .desc {
      color: #fff;
      font-size: 14px;
      text-align: center;
      margin-top: 100px;
      vertical-align: middle;
    }

    .countdown .desc>strong {
      font-size: 18px;
      vertical-align: middle;
      margin-right: 8px;
    }

    .countdown .time {
      width: 80%;
      height: 30px;
      margin: 0 auto;
      margin-top: 10px;
      color: #fff;
      font-size: 20px;
      margin-left: 25px;
    }

    .countdown .time>span {
      width: 30px;
      height: 30px;
      display: inline-block;
      background: #2f3430;
      margin-left: 5px;
      text-align: center;
      font-weight: bold;
      padding-top: 4px;
    }
  </style>

Body中的相关设置

  <div class="countdown">
<!--    标题-->
    <div class="title">京东秒杀</div>
<!--    描述-->
    <div class="desc">
      <strong id="h">16</strong>点场距离结束
    </div>
<!--    倒计时-->
    <div class="time">
      <span class="h">1</span>
      :
      <span class="m">1</span>
      :
      <span class="s">1</span>
    </div>
  </div>

描述位置的场次设置

这个场次，应该是我们当下时间与距离最近的偶数时间的差，相当于，如果我们是11点以后，那就应该是10点场（10-12），13点以后就是12点场（12-14）。

思路

获取当下的时间，然后取余2，如果是等于零的，那就是整数场，如果不是，那就减一.

对于获取到的时间来说，如果是小于10的，就会出现一个空缺，所以我们要补上一个零。（短路表达式）

获取节点，然后将处理好的时间扔进去。

   // 对于描述位置的时间的设置
    // 获取当下时间
    var date=new Date();
    // 获取当下的小时时间
    var hours=date.getHours();
    // 判断是否为偶数场，仅仅计算的是小时取余2，8%2=0  9%2=1 10&&2=0
    hours =hours % 2 !=0 ? hours-1:hours;
    // 如果小于10的话，需要补上一个0,此处使用短路表达式
    // 条件&&表达式1 条件成立则执行后边的
    hours<10 &&(hours='0'+hours);
    // 然后获取节点对象，id为h的一个
    var h =document.querySelector('#h');
    // 然后把计算好的值丢进去
    h.innerHTML =hours;

倒计时设置

思路：

创建时间对象，设置时分秒，时间的话就是上方获取到的时间+2就行了。

倒计时的时间就是结束的时间减去当前的时间。

减完以后，获得的时间是毫秒的格式，需要提取时间。

最后，获取页面节点，将提取出来的值放进去。

创建时间对象并直接设置时间

    // 创建时间对象
    var endtime =new Date();
    // 设置时间，注意，我们上方获取的时间是字符串类型的，我们需要进行类型的隐士转化
    endtime.setHours(hours -0 +2);
    // 设置分和秒，此处直接为0，整点计时
    endtime.setMinutes(0);
    endtime.setSeconds(0);

两个时间相减并提取时分秒

 // 用最后的结束时间减去当下的时间,得到毫秒时间
    var cha =endtime -date;
    // 然后开始提取出时分秒
    // 时
    var h =parseInt(cha/1000/60/60);
    // var h =cha/1000/60/60;
    // console.log(h)
    // 分，变成，再变成分
    var m=parseInt(cha/1000/60%60);
    // console.log(m)
    // 秒
    var s =parseInt(cha/1000%60);

获取页面节点填充数据

获取的节点=计算出来的值，将计算出来的值赋值给节点

document.querySelector('.h').innerHTML = h;
document.querySelector('.m').innerHTML = m;
document.querySelector('.s').innerHTML = s;

最后

最后将所有的代码放进一个函数里面，末尾设置定时器，调用函数设置1秒变化一下即可

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .countdown {
            width: 190px;
            height: 260px;
            margin: 0 auto;
            background: #E83632;
            background: url(http://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/img/4a15d8883775742e3efbb850ae14def7.png);
        }

        .countdown .title {
            color: #fff;
            font-size: 30px;
            text-align: center;
            font-weight: bold;
            padding-top: 30px;
        }

        .countdown .desc {
            color: #fff;
            font-size: 14px;
            text-align: center;
            margin-top: 100px;
            vertical-align: middle;
        }

        .countdown .desc>strong {
            font-size: 18px;
            vertical-align: middle;
            margin-right: 8px;
        }

        .countdown .time {
            width: 80%;
            height: 30px;
            margin: 0 auto;
            margin-top: 10px;
            color: #fff;
            font-size: 20px;
            margin-left: 25px;
        }

        .countdown .time>span {
            width: 30px;
            height: 30px;
            display: inline-block;
            background: #2f3430;
            margin-left: 5px;
            text-align: center;
            font-weight: bold;
            padding-top: 4px;
        }
    </style>
</head>
<body>
<div class="countdown">
    <!--    标题-->
    <div class="title">京东秒杀</div>
    <!--    描述-->
    <div class="desc">
        <strong id="h">16</strong>点场距离结束
    </div>
    <!--    倒计时-->
    <div class="time">
        <span class="h">1</span>
        :
        <span class="m">1</span>
        :
        <span class="s">1</span>
    </div>
</div>
<script>
function fn() {
    // 对于描述位置的时间的设置
    // 获取当下时间
    var date=new Date();
    // console.log(date)
    // 获取当下的小时时间
    var hours=date.getHours();
    // 判断是否为偶数场，仅仅计算的是小时取余2，8%2==0  9%2==1 10&&2==0
    hours =hours % 2 !=0 ? hours-1:hours;
    // 如果小于10的话，需要补上一个0,此处使用短路表达式
    // 条件&&表达式1 条件成立则执行后边的
    hours<10 &&(hours='0'+hours);
    // 然后获取节点对象，id为h的一个
    var h =document.querySelector('#h');
    // 然后把计算好的值丢进去
    h.innerHTML =hours;
    console.log(typeof hours)


    // 现在开始对下方的倒计时进行设置
    // 设置结束的时间
    // 创建时间对象
    var endtime =new Date();
    // 设置时间，注意，我们上方获取的时间是字符串类型的，我们需要进行类型转化(隐士转化)
    endtime.setHours(hours -0 +2);
    // 设置分和秒，此处直接为0，整点计时
    endtime.setMinutes(0);
    endtime.setSeconds(0);

    // 用最后的结束时间减去当下的时间,得到毫秒时间
    var cha =endtime -date;
    // 然后开始提取出时分秒
    // 时
    var h =parseInt(cha/1000/60/60);
    // var h =cha/1000/60/60;
    // console.log(h)
    // 分，变成，再变成分
    var m=parseInt(cha/1000/60%60);
    // console.log(m)
    // 秒
    var s =parseInt(cha/1000%60);

    // 获取页面节点，此处为：获取的节点=计算出来的值，将计算出来的值赋值给节点
    document.querySelector('.h').innerHTML = h;
    document.querySelector('.m').innerHTML = m;
    document.querySelector('.s').innerHTML = s;
}
fn();
setInterval(fn,1000)
</script>
</body>
</html>