欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Angular2實現(xiàn)的秒表及改良版示例

 更新時間:2019年05月10日 08:41:40   作者:zhy前端攻城獅  
這篇文章主要介紹了Angular2實現(xiàn)的秒表及改良版,結(jié)合實例形式分析 Angular2實現(xiàn)秒表功能的原理、操作技巧與相關(guān)注意事項,需要的朋友可以參考下

本文實例講述了Angular2實現(xiàn)的秒表及改良版。分享給大家供大家參考,具體如下:

初版

代碼:

export class Watches {
  id: number;
  str: string;
}
export let watcheList: Watches[] = [{
  id: 0, str: '123456'
}, {
  id: 1, str: '564822'
}]
//watchList 是一個靜態(tài)類
watchList = watcheList;
watchStr: string;
//判斷是否是第一次點擊startWatch
num: number = 0;
//分 秒 毫秒
minute: number = 0;
second: number = 0;
millisecond: number = 0;
//臨時變量 存儲計次時的時間,后加入watcheList數(shù)組
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,調(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是,在前面加一個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)該為計次
   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函數(shù)里面,定義了一個變量毫秒millisecond,每隔43ms調(diào)用timer函數(shù),所以millisecond每次增加43,而后1000ms之后seond增加1,60s之后,minute增加1.

缺點:

函數(shù)的運行時間不可控,所以毫秒的增加不準(zhǔn)確。

改良版

代碼:

// 秒表
export class Watches {
  id: number;
  value: number;
}
export let watcheList: Watches[] = []
export class StopwatchComponent {
 //導(dǎo)入的靜態(tài)類
 watchList = watcheList;
 //臨時變量,用來存貯計次時的時間
 temp: number;
 //判斷startWatch是第一次開始,還是計次
 num: number = 0;
 //開始時間
 startTime: number;
 //當(dāng)前時間
 nowTime: number;
 //時間差
 timerRunner: number = 0;
 //interval函數(shù)的名稱
 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) {
   //當(dāng)前狀態(tài)為計時,將計時的數(shù)據(jù)加入進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擊startWatch時,獲取當(dāng)前時間作為開始時間,并每43ms觸發(fā)定時器,獲取最新時間。時間差則為最新時間減去開始時間

PS:這里再為打擊推薦一款功能相似的在線工具供大家參考:

在線秒表工具:
http://tools.jb51.net/bianmin/miaobiao

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)

希望本文所述對大家AngularJS程序設(shè)計有所幫助。

相關(guān)文章

  • Angular.JS中的指令引用template與指令當(dāng)做屬性詳解

    Angular.JS中的指令引用template與指令當(dāng)做屬性詳解

    這篇文章主要介紹了Angular.JS中的指令引用template與指令當(dāng)做屬性的相關(guān)資料,文中介紹的非常詳細(xì),對大家具有一定的參考價值,需要的朋友們下面來一起看看吧。
    2017-03-03
  • AngularJS實現(xiàn)表格的增刪改查(僅限前端)

    AngularJS實現(xiàn)表格的增刪改查(僅限前端)

    這篇文章主要介紹了AngularJS實現(xiàn)表格的增刪改查,僅限前端,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • AngularJS中的過濾器filter用法完全解析

    AngularJS中的過濾器filter用法完全解析

    這篇文章主要介紹了AngularJS中的過濾器filter用法,包括Angular中一些常用的自帶的過濾器的列舉以及自定義filter的方法,需要的朋友可以參考下
    2016-04-04
  • Angular.js中處理頁面閃爍的方法詳解

    Angular.js中處理頁面閃爍的方法詳解

    我們在應(yīng)用的頁面或者組件需要加載數(shù)據(jù)時,瀏覽器和angular渲染頁面都需要消耗一定的時間。這里的間隔可能很小,甚至讓人感覺不到區(qū)別;但也可能很長,這樣會導(dǎo)致讓我們的用戶看到了沒有被渲染過的頁面。本文將介紹Angular.js中處理頁面閃爍的方法。
    2017-03-03
  • Angular6中使用Swiper的方法示例

    Angular6中使用Swiper的方法示例

    這篇文章主要介紹了Angular6中使用Swiper的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • 詳細(xì)談?wù)凙ngularJS的子級作用域問題

    詳細(xì)談?wù)凙ngularJS的子級作用域問題

    大家在使用angularjs的時候,很容易忽略AngularJS自帶指令的作用域問題,有一些指令會產(chǎn)生獨立的自己作用域,造成子級無法與父級作用域雙向綁定的問題。下面我們來看看這些問題,有需要的可以參考借鑒。
    2016-09-09
  • angularJS自定義directive之帶參方法傳遞詳解

    angularJS自定義directive之帶參方法傳遞詳解

    今天小編就為大家分享一篇angularJS自定義directive之帶參方法傳遞詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-10-10
  • angularJS之$http:與服務(wù)器交互示例

    angularJS之$http:與服務(wù)器交互示例

    $http是angular中的一個核心服務(wù),本篇文章主要介紹了angularJS之$http:與服務(wù)器交互示例,具有一定的參考價值,有興趣的可以了解一下。
    2017-03-03
  • 解決nodejs中使用http請求返回值為html時亂碼的問題

    解決nodejs中使用http請求返回值為html時亂碼的問題

    下面小編就為大家?guī)硪黄鉀Qnodejs中使用http請求返回值為html時亂碼的問題。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-02-02
  • Angular.js中控制器之間的傳值詳解

    Angular.js中控制器之間的傳值詳解

    angular中每個controller(控制器)都會有自己的$scope,通過為這個對象添加屬性賦值,就可以將數(shù)據(jù)傳遞給模板進行渲染,每個$scope只會在自己控制器內(nèi)起作用,而有時候需要用到其他控制器中的數(shù)據(jù)就要考慮到控制器之間參數(shù)的傳遞了,下面來看看詳細(xì)的介紹。
    2017-04-04

最新評論