Angular2实现的秒表及改良版示例

本文实例讲述了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触发定时器，获取最新时间。时间差则为最新时间减去开始时间

ps：这里再为打击推荐一款功能相似的在线工具供大家参考：

在线秒表工具：