本文實例講述了Angular2實現的秒表及改良版。分享給大家供大家參考，具體如下：

初版

代碼：

export class Watches {  id: number;  str: string;}export let watcheList: Watches[] = [{  id: 0, str: '123456'}, {  id: 1, str: '564822'}]//watchList 是一個靜態(tài)類watchList = watcheList;watchStr: string;//判斷是否是第一次點擊startWatchnum: 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，形式則變?yōu)?0: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) {   //該狀態(tài)應該為計次   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 { //導入的靜態(tài)類 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) {   //當前狀態(tài)為計時，將計時的數據加入進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);  } }}