VUE实现计时器

最新推荐文章于 2024-11-22 10:30:59 发布

CodeYu_

最新推荐文章于 2024-11-22 10:30:59 发布

阅读量7.3k

点赞数 6

分类专栏： Vue javascript

本文链接：https://blog.youkuaiyun.com/Aiolimp/article/details/118526737

版权

Vue 同时被 2 个专栏收录

7 篇文章

订阅专栏

javascript

7 篇文章

订阅专栏

本文介绍了如何在Vue中实现计时器功能，包括定义开始和结束计时的方法，使用computed属性实时更新时间，并详细讲解了如何将时间转换为易读的时分秒格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VUE实现计时器

在这里插入图片描述

1.定义开始计时，结束计时方法

   //开始方法
    answer() {
      this.beginTime = moment().format("X"); //点击开始，获取当前时间(秒)
    },
    hangUp() {
      this.endTime = moment().format("X");//点击结束，获取当前时间(秒)
    },

2.在computed中添加计时器时时更新时间

 watch: {
    sessionDuration(a, b) {},
  },
  computed: {
    sessionDuration: function () {
      clearInterval(this.timer);//清除计时器
      if (this.endTime) {
        //已结束
        let date = this.endTime - this.beginTime;
        this.time = this.formateSeconds(date);
      } else if (this.beginTime) {
      //添加计时器，每一秒计时一次
        this.timer = setInterval(() => {
         //当前时间-开始时间
          let date = moment().format("X") - this.beginTime;
          this.time = this.formateSeconds(date);
        }, 1000);
      }
    },
  },

4.将时间转换为时分秒

//将秒转化为时分秒
    formateSeconds(endTime) {
      let secondTime = parseInt(endTime); //将传入的秒的值转化为Number
      let min = 0; // 初始化分
      let h = 0; // 初始化小时
      let result = "";
      if (secondTime > 60) {
        //如果秒数大于60，将秒数转换成整数
        min = parseInt(secondTime / 60); //获取分钟，除以60取整数，得到整数分钟
        secondTime = parseInt(secondTime % 60); //获取秒数，秒数取佘，得到整数秒数
        if (min > 60) {
          //如果分钟大于60，将分钟转换成小时
          h = parseInt(min / 60); //获取小时，获取分钟除以60，得到整数小时
          min = parseInt(min % 60); //获取小时后取佘的分，获取分钟除以60取佘的分
        }
      }
      if (h.toString().padStart(2, "0") == "00") {
        result = `${min.toString().padStart(2, "0")}分${secondTime
          .toString()
          .padStart(2, "0")}秒`;
      } else {
        result = `${h.toString().padStart(2, "0")}时${min
          .toString()
          .padStart(2, "0")}分${secondTime.toString().padStart(2, "0")}秒`;
      }

      return result;
    },