Vant组件库CountDown倒计时组件实现京东倒计时（每日固定时间）

原创已于 2023-03-23 09:41:14 修改 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

于 2023-03-22 21:31:18 首次发布

本文介绍了如何使用Vant组件库的CountDown组件来实现类似京东每日固定时间的倒计时功能。首先在created钩子中调用获取时间的方法，然后在methods中定义获取毫秒数的函数，将结果赋值给data中的time变量。通过组件展示倒计时状态，包括倒计时中和倒计时结束。提供的代码示例包括HTML和样式定义。

如标题所示功能实现依赖于vant组件库，所以依照以下步骤来一步步进行操作

在main.js 中按需引入Vant组件库中的倒计时组件

import { CountDown } from 'vant';
Vue.use(CountDown);

找到需要的组件样式进行使用，这里我使用的是毫秒级渲染

vant中的推荐标签

<van-count-down millisecond :time="time" format="HH:mm:ss:SS" />

以为大家都比较懒，以下是我自己修改的标签以及样式

html：

<span style="margin-left: 10px" class="time">
            <span class="huodong">16点场</span>
            <van-count-down
              v-if="time > 0"
              class="colon"
              millisecond
              :time="time"
              format="HH:mm:ss:SS"
            />
            <span
              v-else
              class="colon"
              style="font-weight: 530; padding: 1.5px 5px"
            >
              活动已结束
            </span>
          </span>

less / scss

 .time {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      .huodong {
        display: inline-block;
        font-size: 30px !important;
        background-color: #d81e06;
        color: #fff;
        padding: 2px 6px;
        border-radius: 9px 0 0 9px;
      }
      .colon {
        display: inline-block;
        font-size: 28px !important;
        color: #d81e06;
        background-color: white;
        border: 1px solid #d81e06;
        border-radius: 0 9px 9px 0;
        padding: 1px 5px;
      }
    }

data中声明绑定的time变量

export default {
  data() {
    return {
      //这里将vant中的定义数据删除即可，在下面我们用自己的函数为他赋值
      //time: 30 * 60 * 60 * 1000,
        time: 0
    };
  },
};

在 methods 中定义函数获取我们所需的毫秒数以便组件进行展示

   // 获取活动所需毫秒数
    getTime() {
      const number = new Date() // 获取当前时间
      console.log(number)
      const hour = number.getHours() // 获取小时
      const minutes = number.getMinutes() // 获取分钟
      const seconds = number.getSeconds() // 获取秒
      // 将当前时间转换为毫秒并进行拼接
      const h = parseInt(hour * 1000 * 60 * 60)
      const m = parseInt(minutes * 1000 * 60)
      const s = parseInt(seconds * 1000)
      console.log(hour, minutes, seconds)
      console.log(h, m, s)
      const nowTime = h + m + s
      // 将活动时间转换为毫秒
      //23为活动时间即小时数，根据需求进行修改即可
      const shakyTime = 23 * 1000 * 60 * 60
      // 将两者相减获取倒计时时间
      const finallyTime = shakyTime - nowTime
      console.log(finallyTime)
      // 将倒计时时间赋值给组件所需的data变量
      this.time = finallyTime
    }

这里的控制台打印我没有关闭便于大家复制后查看输出结果，实际使用可以自行删除