js之封装（秒数）转化为时分秒倒计时组件 vue版本

 

效果如上图；

<!--
 * @Author: lhl
 * @Date: 2021-09-09 21:43:00
 * @LastEditors: lhl
 * @LastEditTime: 2021-09-09 22:21:55
 * @Description:  组件调用 <Test :remainTime="5000"></Test>
-->
<template>
  <span>{{
    hour
      ? hourString + ':' + minuteString + ':' + secondString
      : minuteString + ':' + secondString
  }}</span>
</template>

<script>
export default {
  data() {
    return {
      hour: '',
      minute: '',
      second: '',
      timer: ''
    }
  },
  props: {
    remainTime: {
      // 倒计时间总秒数
      default: ''
    }
  },
  mounted() {
    if (this.remainTime > 0) {
      this.hour = Math.floor((this.remainTime / 3600) % 24)
      this.minute = Math.floor((this.remainTime / 60) % 60)
      this.second = Math.floor(this.remainTime % 60)
      this.countDowm()
    } else {
      this.minute = 0
      this.second = 0
    }
  },
  methods: {
    countDowm() {
      var self = this
      clearInterval(this.timer)
      this.timer = setInterval(function () {
        if (self.hour === 0) {
          if (self.minute !== 0 && self.second === 0) {
            self.second = 59
            self.minute -= 1
          } else if (self.minute === 0 && self.second === 0) {
            self.second = 0
            self.$emit('countDowmEnd', true)
            clearInterval(self.timer)
          } else {
            self.second -= 1
          }
        } else {
          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
    }
  },
  computed: {
    hourString() {
      return this.formatNum(this.hour)
    },
    minuteString() {
      return this.formatNum(this.minute)
    },
    secondString() {
      return this.formatNum(this.second)
    }
  }
}
</script>

组件有不完善的地方请多多指出；多数场景自己已经测过了；