HTML+CSS+JavaScript：实现京东秒杀倒计时效果

最新推荐文章于 2024-02-02 15:02:11 发布

早八睡不醒午觉睡不够的程序猿

最新推荐文章于 2024-02-02 15:02:11 发布

阅读量1.6k

点赞数 2

本文链接：https://blog.csdn.net/lbcbjtlhmjq/article/details/131972607

版权

一、产品需求

下图是京东首页的京东秒杀倒计时

我们将模仿京东倒计时做一个下班倒计时效果（如下图）

二、代码素材

我先把缺失JS部分的代码放在这里，感兴趣的小伙伴可以先自己试试

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .countdown {
      width: 240px;
      height: 305px;
      text-align: center;
      line-height: 1;
      color: #fff;
      background-color: brown;
      /* background-size: 240px; */
      /* float: left; */
      overflow: hidden;
    }

    .countdown .next {
      font-size: 16px;
      margin: 25px 0 14px;
    }

    .countdown .title {
      font-size: 33px;
    }

    .countdown .tips {
      margin-top: 80px;
      font-size: 23px;
    }

    .countdown small {
      font-size: 17px;
    }

    .countdown .clock {
      width: 142px;
      margin: 18px auto 0;
      overflow: hidden;
    }

    .countdown .clock span,
    .countdown .clock i {
      display: block;
      text-align: center;
      line-height: 34px;
      font-size: 23px;
      float: left;
    }

    .countdown .clock span {
      width: 34px;
      height: 34px;
      border-radius: 2px;
      background-color: #303430;
    }

    .countdown .clock i {
      width: 20px;
      font-style: normal;
    }
  </style>
</head>

<body>
  <div class="countdown">
    <p class="next">今天是xxxx年x月xx日</p>
    <p class="title">下班倒计时</p>
    <p class="clock">
      <span id="hour">00</span>
      <i>:</i>
      <span id="minutes">25</span>
      <i>:</i>
      <span id="scond">20</span>
    </p>
    <p class="tips">18:30:00下课</p>
  </div>
  <script>
   
  </script>
</body>

</html>

三、算法思路

1、获取当日日期并渲染至倒计时顶部

2、获取当日下班时间的时间戳

3、封装函数：获取剩余时间

3.1. 获取当前时间的时间戳

3.2. 两时间戳相减得到剩余时间

3.3. 将时间转化成时分秒

3.4. 将时间渲染到页面中，小于10的数字前需要补0

4、先调用一次获取剩余时间的函数，因为间歇函数一秒之后才会启用

5、利用间歇函数实现倒计时动态效果，函数调用的时间间隔为1秒

四、完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .countdown {
      width: 240px;
      height: 305px;
      text-align: center;
      line-height: 1;
      color: #fff;
      background-color: brown;
      /* background-size: 240px; */
      /* float: left; */
      overflow: hidden;
    }

    .countdown .next {
      font-size: 16px;
      margin: 25px 0 14px;
    }

    .countdown .title {
      font-size: 33px;
    }

    .countdown .tips {
      margin-top: 80px;
      font-size: 23px;
    }

    .countdown small {
      font-size: 17px;
    }

    .countdown .clock {
      width: 142px;
      margin: 18px auto 0;
      overflow: hidden;
    }

    .countdown .clock span,
    .countdown .clock i {
      display: block;
      text-align: center;
      line-height: 34px;
      font-size: 23px;
      float: left;
    }

    .countdown .clock span {
      width: 34px;
      height: 34px;
      border-radius: 2px;
      background-color: #303430;
    }

    .countdown .clock i {
      width: 20px;
      font-style: normal;
    }
  </style>
</head>

<body>
  <div class="countdown">
    <p class="next">今天是xxxx年x月xx日</p>
    <p class="title">下班倒计时</p>
    <p class="clock">
      <span id="hour">xx</span>
      <i>:</i>
      <span id="minutes">xx</span>
      <i>:</i>
      <span id="second">xx</span>
    </p>
    <p class="tips">18:30:00下课</p>
  </div>
  <script>
    //获取当日日期并渲染至倒计时顶部
    const date = new Date()
    const next = document.querySelector('.next')
    next.innerHTML = `今天是${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`

    //获取当日下班时间的时间戳
    const afterWork = +new Date(`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} 18:30:00`)

    //封装函数：获取剩余时间
    function getCountTime() {
      //获取当前时间的时间戳
      const now = +new Date()

      //两时间戳相减得到剩余时间
      const remain = (afterWork - now) / 1000

      //将时间转化成时分秒
      const s = parseInt(remain % 60)
      const m = parseInt(remain / 60 % 60)
      const h = parseInt(remain / 60 / 60 % 24)

      //将时间渲染到页面中，记得小于10的数字前需要补0
      const hour = document.querySelector('#hour')
      const minutes = document.querySelector('#minutes')
      const second = document.querySelector('#second')
      hour.innerHTML = h >= 10 ? h : '0' + h
      minutes.innerHTML = m >= 10 ? m : '0' + m
      second.innerHTML = s >= 10 ? s : '0' + s
    }

    //先调用一次，因为间歇函数一秒之后才会启用
    getCountTime()

    //利用间歇函数实现倒计时动态效果，函数调用的时间间隔为1秒
    let timer = setInterval(() => {
      getCountTime()
    }, 1000)

  </script>
</body>

</html>

早八睡不醒午觉睡不够的程序猿

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JavaScript：实现京东秒杀倒计时效果

三、算法思路1、获取当日日期并渲染至倒计时顶部2、获取当日下班时间的时间戳3、封装函数：获取剩余时间 3.1. 获取当前时间的时间戳 3.2. 两时间戳相减得到剩余时间 3.3. 将时间转化成时分秒 3.4. 将时间渲染到页面中，小于10的数字前需要补04、先调用一次获取剩余时间的函数，因为间歇函数一秒之后才会启用5、利用间歇函数实现倒计时动态效果，函数调用的时间间隔为1秒
复制链接

扫一扫