本文實例講述了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;//判斷是否是第一次點擊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，形式則變為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：這里再為打擊推薦一款功能相似的在線工具供大家參考：
在線秒表工具：
http://tools.VeVB.COm/bianmin/miaobiao
更多關于AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
新聞熱點
疑難解答
