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);
 }
 }
}

// 秒表
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);
 }
 }
}