淘宝app首页-聚划算结束倒计时时钟的实现

最近好乐
437 阅读2分钟

前两天小编完成了一个小功能，就是类似淘宝首页的聚划算结束倒计时时钟的效果。具体是如何实现的呢？咱们一起来看一下：

html部分：

<div class="countdown">
    <p class="next">现在是xxxx年xx月xx日</p>
    <div class="ju">
      <p>聚划算</p>
    </div>
    <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">22:30:00结束</p>
  </div>

html部分很简单，就是用一个div设计了一个大盒子，然后里面的文字全部用p标签写入。

css部分：

<style>
    .next{
      font-size: 16px;
    }
    .countdown {
      width: 240px;
      height: 305px;
      text-align: center;
      line-height: 1;
      color: #fff;
      background-color: rgb(82, 167, 46);
      overflow: hidden;
    }
    .countdown .next {
      font-size: 16px;
      margin: 25px 0 14px;
    }
  .ju{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80px;
      font-size: 50px;
      color: red;
    }
    .countdown .title {
      font-size: 20px;
    }
    .countdown .tips {
      margin-top: 40px;
      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>

css部分也比较简单，咱们话也不多说，咱们重点来看js部分： js部分：

<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()} 23: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>

首先创建一个Date对象，它表示代码执行时的日期和时间。然后使用document.querySelector方法来选择页面中第一个class属性为next的元素。querySelector方法返回与该选择器组匹配的第一个Element元素。如果没有找到匹配的元素，则返回null。 ${date.getMonth() + 1}：Date对象的getMonth方法返回月份索引（0表示一月，1表示二月，依此类推）。由于我们的月份从1开始计数，所以这里要加1。

  1. 显示当前日期：

    创建一个Date对象date来获取当前日期和时间。
    使用document.querySelector('.next')获取页面上class为next的元素。
    设置这个元素的innerHTML为当前日期（格式为“现在是XXXX年XX月XX日”）。

  2. 设置当日结束时间的时间戳：

    创建一个新的Date对象afterWork，其值设置为当天（与date相同）的23:30:00。
    使用一元加号+将Date对象转换为时间戳（毫秒数）。

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

    getCountTime函数用于计算从当前时间到afterWork（即当天23:30:00）的剩余时间。
    获取当前时间的时间戳now。
    计算剩余时间的秒数remain（通过将两个时间戳相减并除以1000，因为时间戳是以毫秒为单位的）。
    将剩余时间转换为小时h、分钟m和秒s。
    在页面上显示这些时间值，确保小时、分钟和秒都是两位数（通过在需要时添加前导零）。

  4. 初始化倒计时：
    立即调用getCountTime函数来在页面上显示初始的剩余时间。

  5. 实现倒计时动态效果：

    使用setInterval函数每秒调用一次getCountTime函数，以更新页面上的剩余时间。
    将setInterval的返回值（一个ID）存储在timer变量中，以便稍后可以清除这个间隔。

最终实现的效果如下：

Snipaste_2024-05-07_15-37-11.png

下面是全部代码：

<!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>
    .next{
      font-size: 16px;
    }
    .countdown {
      width: 240px;
      height: 305px;
      text-align: center;
      line-height: 1;
      color: #fff;
      background-color: rgb(82, 167, 46);
      overflow: hidden;
    }
    .countdown .next {
      font-size: 16px;
      margin: 25px 0 14px;
    }
  .ju{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80px;
      font-size: 50px;
      color: red;  
    }
    .countdown .title {
      font-size: 20px;
    }
    .countdown .tips {
      margin-top: 40px;
      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年xx月xx日</p>
    <div class="ju">
      <p>聚划算</p>
    </div>
    <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">23: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()} 23: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)
      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()
    let timer = setInterval(() => {
      getCountTime()
    }, 1000)
  </script>
</body>
</html>
avatar
文章
阅读
粉丝