溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了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：這里再為打擊推薦一款功能相似的在線工具供大家參考：
在線秒表工具：
http://tools.jb51.net/bianmin/miaobiao
更多關于AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
