自定义时分秒计时器

自定义时分秒计时器

<div>
    <button class="count" @click.once="addCount" >开始计时</button>
    <div>{{str}}</div>
    <button class="count" @click.once="timeStop" >停止计时</button>
  </div>

初始化变量

data() {
    return {
      count: 0,
      hour: 0, //定义时，分，秒，毫秒并初始化为0；
      minute: 0,
      ms: 0,
      second: 0, //秒
      time: '',
      str: '00:00:00 000',
    };
  },

定义计时器，函数调用自动计时

methods: {
    addCount() {
      this.count += 1;
      this.timeStart()
    },
    timeStart() {
        this.time = setInterval(this.timer, 50)
    },
    timeStop(){
      clearInterval(this.time)
    },
    timer() {
      //定义计时函数
      this.ms = this.ms + 50 //毫秒
      if (this.ms >= 1000) {
        this.ms = 0
        this.second = this.second + 1 //秒
      }
      if (this.second >= 60) {
        this.second = 0
        this.minute = this.minute + 1 //分钟
      }
      if (this.minute >= 60) {
        this.minute = 0
        this.hour = this.hour + 1 //小时
      }
      this.str =
        this.toDub(this.hour) +
        ':' +
        this.toDub(this.minute) +
        ':' +
        this.toDub(this.second) + " " + this.toDubms(this.ms)/* + "毫秒"*/
    },
    toDub(n) {
      //补0操作
      if (n < 10) {
        return '0' + n
      } else {
        return '' + n
      }
    },
    toDubms(n) {
      if(n == 0){
        return '00' + n
      }
      if (n < 100) {
        return '0' + n
      } else {
        return '' + n
      }
    },
  },

最后附上完整代码片段