国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

Angular2實現的秒表及改良版示例

來源:懂視網 責編:小采 時間:2020-11-27 21:57:24
文檔

Angular2實現的秒表及改良版示例

Angular2實現的秒表及改良版示例:本文實例講述了Angular2實現的秒表及改良版。分享給大家供大家參考,具體如下: 初版 代碼: export class Watches { id: number; str: string; } export let watcheList: Watches[] = [{ id: 0, str: '123456' },
推薦度:
導讀Angular2實現的秒表及改良版示例:本文實例講述了Angular2實現的秒表及改良版。分享給大家供大家參考,具體如下: 初版 代碼: export class Watches { id: number; str: string; } export let watcheList: Watches[] = [{ id: 0, str: '123456' },

本文實例講述了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程序設計有所幫助。

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

Angular2實現的秒表及改良版示例

Angular2實現的秒表及改良版示例:本文實例講述了Angular2實現的秒表及改良版。分享給大家供大家參考,具體如下: 初版 代碼: export class Watches { id: number; str: string; } export let watcheList: Watches[] = [{ id: 0, str: '123456' },
推薦度:
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 国产a国产片 | 99精品高清视频一区二区 | 欧美一区二区免费 | 亚洲欧美韩国 | 国产精品久久久久久久9999 | 国产日韩中文字幕 | 一区二区不卡久久精品 | 欧美精品啪啪 | 亚洲最新偷拍 | 91精品国产色综合久久 | 日韩精品第一页 | 国产毛片一级国语版 | 九九爱精品视频 | 精品国产综合区久久久久99 | 五月婷婷在线观看 | 欧美va免费精品高清在线 | 欧美色图亚洲激情 | 久久成人a毛片免费观看网站 | 国产欧美日 | 欧美精品一区二区三区久久 | 久久久久久久久久久9精品视频 | 午夜香蕉视频 | 日本全黄 | 欧美孕妇乱大交xxxxx | 91久久精品国产亚洲 | 欧美一区二区日韩一区二区 | 国产精品成人第一区 | 亚洲视频免费观看 | 亚洲国产精品免费观看 | 亚洲青草视频 | 97在线亚洲 | 欧美亚洲国产一区 | 欧美 日韩 国产 在线 | 免费国产最新进精品视频 | 欧美日韩国产另类一区二区三区 | 精品久久久久久综合网 | 九九51精品国产免费看 | 国产精品亚洲国产三区 | 久久久久久国产精品视频 | 福利视频一区二区牛牛 | 国产精品三级一区二区 |