vue2一个计时器的功能

<div class="timeContainer">{{ time }}</div> 

data：
      hour: 0,
      minute: 0,
      second: 0,
      initTime: Date.now(),
      timeTotal:0,
      time: "00:00:00",



//记录当前时间至session并计算出时间差值也就是计时的时间
    Initime() {
      if(sessionStorage.getItem('InitDate')==null){
      sessionStorage.setItem('InitDate',Date.now())
    }
       this.timeTotal=Date.now()-sessionStorage.getItem('InitDate');
       const baseTime=Math.round(this.timeTotal/1000);
       const second=baseTime%60;
       this.second=second;
       const minute=Math.floor((baseTime/60)%60);
       this.minute=minute;
       const hour=Math.floor((baseTime/(60*60))%60);
       this.hour=hour;
    },
    //计时器计时开始
    start() {
     this.Initime();
      this.flag = setInterval(() => {
        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.time =
          this.complZero(this.hour) +
          ":" +
          this.complZero(this.minute) +
          ":" +
          this.complZero(this.second);
      }, 1000);
    },
    //格式化计时时间00:00:00
    complZero(n) {
      return n < 10 ? "0" + n : "" + n;
    },

一、起因

创建这个计时器功能的起因是我想在自己项目网站中实现一个记录自己学习时间的一个正计时器功能并且不会随着点击其他页面而时间重置，但网上element-ui官方组件只有倒计时功能组件，遂在网上查找相关代码，找到了计时器相关代码模块，但会随着页面的刷新或者点击网站内其他标签页时间重置，这样就达不到学习计时这样一个功能，遂又在原有计时器功能上面作了一下改造；具体就是InitTime方法中的代码

二、思路

时间计时

要想实现刷新页面或者点击其他标签页时间不重置这样一个功能，我们可以利用sessionStorage来存储我们进入网站的时间戳，每次刷新页面时判断sessionStorage是否有这个时间戳如果有则不对初试时间进行存储如果没有则存储时间戳，然后每次刷新页面时记录下当前时间戳与sessionStorage中的初试时间作一个减法可得到学习的时间，但这是的时间是不规范的是毫秒级别的 所以我们再对其进行一个格式化得到 小时（hour）、分钟（minute）、秒（second）接着修改start中他人的代码 将上述变量添加其中即可