vue中倒计时-时分秒

PXYC_J

已于 2024-08-06 17:03:14 修改

阅读量292

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2021-08-13 17:06:17 首次发布

本文链接：https://blog.csdn.net/qq_39536826/article/details/119679443

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

vue中倒计时

效果图如下：
在这里插入图片描述

首先在data中定义

// 倒计时-时
hour:'',
// 倒计时-分
min:'',
// 倒计时-秒
second:'',
// 倒计时-时间
countSecond:'',
// 结束日期
endDate:'',

然后在methods中写方法

// 倒计时
countTime() {
  let now = new Date().getTime(); // 获取当前时间
  let endDate = new Date(this.endDate); // 设置截止时间
  let end = Number(endDate);
  //let endDate = new Date(this.assistActivityEndTime); // this.assistActivityEndTime需要倒计时的日期
  let leftTime = end - now; // 倒计时时间差
  // 定义变量 d,h,m,s保存倒计时的时间
  if (leftTime >= 0) {
    // 天
    // this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24);
    // let dayh = this.day * 24
    // 时
    let h = Math.floor((leftTime / 1000 / 60 / 60) % 24);
    h = h;
    this.hour = h < 10 ? "0" + h : h;
    // 分
    let m = Math.floor((leftTime / 1000 / 60) % 60);
    this.min = m < 10 ? "0" + m : m;
    // 秒
    let s = Math.floor((leftTime / 1000) % 60);
    this.second = s < 10 ? "0" + s : s;
    this.countSecond = this.hour+':'+this.min+':'+this.second 
  } else {
    this.day = 0;
    this.hour = "00";
    this.min = "00";
    this.second = "00";
    this.countSecond = this.hour+':'+this.min+':'+this.second 
    
  }
  // 等于0的时候不调用
  if (
    Number(this.day) === 0 &&
    Number(this.hour) === 0 &&
    Number(this.min) === 0 &&
    Number(this.second) === 0
  ) {
    this.$route.query.count = 4;
    // 执行飞行任务

    return;
  } else {
    // 递归每秒调用countTime方法，显示动态时间效果,
    setTimeout(this.countTime, 1000);
  }
},