js 传数字，返回时分秒倒计时

最新推荐文章于 2023-11-05 20:50:50 发布

是我呀！卡布达

最新推荐文章于 2023-11-05 20:50:50 发布

阅读量350

点赞数 3

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_40745445/article/details/124530791

版权

需求

今天写方法的时候用到了倒计时的方法，看起来很简单，但是实现起来还是有些麻烦的，记录一下自己的创作过程；
实现：传入一个时间数字，返回参数，实现倒计时的效果

效果

在这里插入图片描述

vue部分

<h3><b>剩余时间: <span style="color:red;">{{hour ? hourString + '时' + minuteString + '分' + secondString + '秒' : minuteString + '分' + secondString + '秒'}}</span></b></h3>

data定义部分

data() {
  return {
    form:{},
    hour: '',
    minute: '',
    second: '',
    timer: ''
  }
},

初始化created调用部分、计算属性computed

created() {
 if (this.$route.query.form != '' && this.$route.query.form != null && this.$route.query.form != undefined) {
   this.form = JSON.parse(this.$route.query.form);
   console.log(this.form);
   this.hour = Math.floor((this.form.examinationLength * 60 / 3600) % 24)
   this.minute = Math.floor((this.form.examinationLength * 60 / 60) % 60)
   this.second = Math.floor(this.form.examinationLength * 60 % 60)
   this.countDowm()
 }
},
computed: {
 hourString() {
   return this.formatNum(this.hour)
 },
 minuteString() {
   return this.formatNum(this.minute)
 },
 secondString() {
   return this.formatNum(this.second)
 }
},

method方法部分

methods:{
  //倒计时
  countDowm() {
    var self = this
    clearInterval(this.timer)
    this.timer = setInterval(function () {
      console.log(console.log("hour=>",self.hour));
      console.log(console.log("minute=>",self.minute));
      console.log(console.log("second=>",self.second));
      if (self.hour === 0) {
        console.log("1");
        if (self.minute !== 0 && self.second === 0) {
          self.second = 59
          self.minute -= 1
        } else if (self.minute === 0 && self.second === 0) {
          self.second = 0
          clearInterval(self.timer)
        } else {
          self.second -= 1
        }
      } else {
        console.log("2");
        if (self.minute !== 0 && self.second === 0) {
          self.second = 59
          self.minute -= 1
        } else if (self.minute === 0 && self.second === 0) {
          self.hour -= 1
          self.minute = 59
          self.second = 59
        } else {
          self.second -= 1
        }
      }
    }, 1000)
  },
  formatNum(num) {
    return num < 10 ? '0' + num : '' + num
  },
}