Angular2實(shí)現(xiàn)的秒表及改良版示例
本文實(shí)例講述了Angular2實(shí)現(xiàn)的秒表及改良版。分享給大家供大家參考,具體如下:
初版
代碼:
export class Watches { id: number; str: string; } export let watcheList: Watches[] = [{ id: 0, str: '123456' }, { id: 1, str: '564822' }] //watchList 是一個(gè)靜態(tài)類 watchList = watcheList; watchStr: string; //判斷是否是第一次點(diǎn)擊startWatch num: number = 0; //分 秒 毫秒 minute: number = 0; second: number = 0; millisecond: number = 0; //臨時(shí)變量 存儲(chǔ)計(jì)次時(shí)的時(shí)間,后加入watcheList數(shù)組 temp= { id: 0, str: '0' }; //定時(shí)器的名字 inter: any; constructor() { } resetWatch() { //清零 this.millisecond = 0; this.second = 0; this.minute = 0; this.temp.str = '000000'; watcheList.length = 0; } timer() { //每隔43ms,調(diào)用該函數(shù),所以增加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; } //當(dāng)小于10是,在前面加一個(gè)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)應(yīng)該為計(jì)次 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); } } }
原理:
在計(jì)時(shí)器timer函數(shù)里面,定義了一個(gè)變量毫秒millisecond,每隔43ms調(diào)用timer函數(shù),所以millisecond每次增加43,而后1000ms之后seond增加1,60s之后,minute增加1.
缺點(diǎn):
函數(shù)的運(yùn)行時(shí)間不可控,所以毫秒的增加不準(zhǔn)確。
改良版
代碼:
// 秒表 export class Watches { id: number; value: number; } export let watcheList: Watches[] = [] export class StopwatchComponent { //導(dǎo)入的靜態(tài)類 watchList = watcheList; //臨時(shí)變量,用來存貯計(jì)次時(shí)的時(shí)間 temp: number; //判斷startWatch是第一次開始,還是計(jì)次 num: number = 0; //開始時(shí)間 startTime: number; //當(dāng)前時(shí)間 nowTime: number; //時(shí)間差 timerRunner: number = 0; //interval函數(shù)的名稱 inter: any; constructor() { } resetWatch() { //清零 this.timerRunner = 0; this.watchList.length = 0; } startWatch(event) { this.temp = this.timerRunner; //開始計(jì)時(shí)的時(shí)間 this.startTime = Date.now(); this.num = this.num + 1; if (this.num > 1) { //當(dāng)前狀態(tài)為計(jì)時(shí),將計(jì)時(shí)的數(shù)據(jù)加入進(jìn)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); } } }
原理:當(dāng)?shù)谝淮吸c(diǎn)擊startWatch時(shí),獲取當(dāng)前時(shí)間作為開始時(shí)間,并每43ms觸發(fā)定時(shí)器,獲取最新時(shí)間。時(shí)間差則為最新時(shí)間減去開始時(shí)間
PS:這里再為打擊推薦一款功能相似的在線工具供大家參考:
在線秒表工具:
http://tools.jb51.net/bianmin/miaobiao
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計(jì)有所幫助。
- Angular.js實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)60秒按鈕的簡單方法
- AngularJS 驗(yàn)證碼60秒倒計(jì)時(shí)功能的實(shí)現(xiàn)
- angular2倒計(jì)時(shí)組件使用詳解
- AngularJs 延時(shí)器、計(jì)時(shí)器實(shí)例代碼
- ionic+AngularJs實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)按鈕
- AngularJS 支付倒計(jì)時(shí)功能實(shí)現(xiàn)思路
- Ionic + Angular.js實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能的方法
- Angular6 發(fā)送手機(jī)驗(yàn)證碼按鈕倒計(jì)時(shí)效果實(shí)現(xiàn)方法
相關(guān)文章
Angular.JS中的指令引用template與指令當(dāng)做屬性詳解
這篇文章主要介紹了Angular.JS中的指令引用template與指令當(dāng)做屬性的相關(guān)資料,文中介紹的非常詳細(xì),對大家具有一定的參考價(jià)值,需要的朋友們下面來一起看看吧。2017-03-03AngularJS實(shí)現(xiàn)表格的增刪改查(僅限前端)
這篇文章主要介紹了AngularJS實(shí)現(xiàn)表格的增刪改查,僅限前端,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07詳細(xì)談?wù)凙ngularJS的子級(jí)作用域問題
大家在使用angularjs的時(shí)候,很容易忽略AngularJS自帶指令的作用域問題,有一些指令會(huì)產(chǎn)生獨(dú)立的自己作用域,造成子級(jí)無法與父級(jí)作用域雙向綁定的問題。下面我們來看看這些問題,有需要的可以參考借鑒。2016-09-09angularJS自定義directive之帶參方法傳遞詳解
今天小編就為大家分享一篇angularJS自定義directive之帶參方法傳遞詳解,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10解決nodejs中使用http請求返回值為html時(shí)亂碼的問題
下面小編就為大家?guī)硪黄鉀Qnodejs中使用http請求返回值為html時(shí)亂碼的問題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02