Angular2秒表及改良版

初版

代码：

export class Watches {
    id: number;
    str: string;
}

export let watcheList: Watches[] = [{
    id: 0, str: '123456'
}, {
    id: 1, str: '564822'
}]


//watchList 是一个静态类
watchList = watcheList;
watchStr: string;

//判断是否是第一次点击startWatch
num: number = 0;
//分  秒  毫秒
minute: number = 0;
second: number = 0;
millisecond: number = 0;

//临时变量  存储计次时的时间，后加入watcheList数组
temp= {
  id: 0,
  str: '0'
};

//定时器的名字
inter: any;

constructor() { }

 resetWatch() {
     //清零
   this.millisecond = 0;
   this.second = 0;
   this.minute = 0;
   this.temp.str = '000000';
   watcheList.length = 0;
 }

timer() {
    //每隔43ms，调用该函数，所以增加43
 this.millisecond = this.millisecond + 43;
 if (this.millisecond >= 1000) {
    this.millisecond = 0;
    this.second = this.second + 1;
 }
 if (this.second >= 60) {
    this.second = 0;     
    this.minute = this.minute + 1;
 }

//当小于10是，在前面加一个0，形式则变为00:00:00
  this.watchStr = (this.minute > 10 ? this.minute : '0' + this.minute) + ':'
    + (this.second > 10 ? this.second : '0' + this.second) + ':'
    + (this.millisecond > 10 ? this.millisecond : '0' + this.millisecond);
}

  startWatch(event) {
    this.num = this.num + 1;
    if (this.num > 1) {
      //该状态应该为计次
      temp.id = this.watchList.length;
      temp.str = this.watchStr;

      this.watchList.push(temp);
    } else {

      this.inter = setInterval(() => {
        this.timer();
      }, 43);
    }

  }
  stopWatch(event) {
    this.num = 0;
    if (this.inter) {
      clearInterval(this.inter);
    }

  }

}

原理：
在计时器timer函数里面，定义了一个变量毫秒millisecond,每隔43ms调用timer函数，所以millisecond每次增加43，而后1000ms之后seond增加1,60s之后，minute增加1.
缺点：
函数的运行时间不可控，所以毫秒的增加不准确。

改良版
代码：

// 秒表
export class Watches {
    id: number;
    value: number;
}
export let watcheList: Watches[] = []

export class StopwatchComponent {
  //导入的静态类
  watchList = watcheList;
  //临时变量，用来存贮计次时的时间
  temp: number;
  //判断startWatch是第一次开始，还是计次
  num: number = 0;
  //开始时间
  startTime: number;
  //当前时间
  nowTime: number;
  //时间差
  timerRunner: number = 0;
  //interval函数的名称
  inter: any;
  constructor() { }
  resetWatch() {
    //清零
    this.timerRunner = 0;
    this.watchList.length = 0;
  }
  startWatch(event) {
    this.temp = this.timerRunner;
    //开始计时的时间
    this.startTime = Date.now();
    this.num = this.num + 1;
    if (this.num > 1) {
      //当前状态为计时，将计时的数据加入进watchList
      let watchObj: Watches = {
        id: 0,
        value: 0
      }
      watchObj.id = this.watchList.length;
      watchObj.value = this.timerRunner;
      this.watchList.push(watchObj);
    } else {
      this.inter = setInterval(() => {
        this.nowTime = Date.now();
        this.timerRunner = this.temp + this.nowTime - this.startTime;
      }, 43);
    }
  }
  stopWatch(event) {
    this.num = 0;
    if (this.inter) {
      clearInterval(this.inter);
    }
  }
}

原理：当第一次点击startWatch时，获取当前时间作为开始时间，并每43ms触发定时器，获取最新时间。时间差则为最新时间减去开始时间