Angular2 implementation of stopwatch and improved version examples

This article describes the stopwatch and improved version implemented by Angular2. Share it for your reference, as follows:

First Edition

Code:

export class Watches {
  id: number;
  str: string;
}
export let watcheList: Watches[] = [{
  id: 0, str: '123456'
}, {
  id: 1, str: '564822'
}]
//watchList is a static classwatchList = watcheList;
watchStr: string;
//Judge whether it is the first time to click startWatchnum: number = 0;
//Minutes and seconds millisecondsminute: number = 0;
second: number = 0;
millisecond: number = 0;
//Temporary variables Store the time of counting, and then add the watchList array to the watchList arraytemp= {
 id: 0,
 str: '0'
};
//The name of the timerinter: any;
constructor() { }
 resetWatch() {
   //Clear   = 0;
   = 0;
   = 0;
   = '000000';
   = 0;
 }
timer() {
  //Every 43ms, the function is called, so 43 is added  =  + 43;
 if ( &gt;= 1000) {
   = 0;
   =  + 1;
 }
 if ( &gt;= 60) {
   = 0;
   =  + 1;
 }
// When it is less than 10, add a 0 in front of it, the form becomes 00:00:00  = ( &gt; 10 ?  : '0' + ) + ':'
  + ( &gt; 10 ?  : '0' + ) + ':'
  + ( &gt; 10 ?  : '0' + );
}
 startWatch(event) {
   =  + 1;
  if ( &gt; 1) {
   //This status should be counted    = ;
    = ;
   (temp);
  } else {
    = setInterval(() =&gt; {
    ();
   }, 43);
  }
 }
 stopWatch(event) {
   = 0;
  if () {
   clearInterval();
  }
 }
}

principle:

In the timer timer function, a variable millisecond is defined. The timer function is called every 43ms, so millisecond increases by 43 each time, and then seon increases by 1,60s after 1000ms, minute increases by 1.

shortcoming:

The running time of the function is uncontrollable, so the increase in milliseconds is inaccurate.

Improved version

Code:

// Stopwatchexport class Watches {
  id: number;
  value: number;
}
export let watcheList: Watches[] = []
export class StopwatchComponent {
 //Imported static class watchList = watcheList;
 //Temporary variables used to store the time of counting times temp: number;
 //Judge whether the startWatch is the first time or the count num: number = 0;
 //Start time startTime: number;
 //Current time nowTime: number;
 //Time difference timerRunner: number = 0;
 //The name of the interval function inter: any;
 constructor() { }
 resetWatch() {
  //Clear   = 0;
   = 0;
 }
 startWatch(event) {
   = ;
  //Time to start timing   = ();
   =  + 1;
  if ( &gt; 1) {
   //The current status is timed, add the timed data to the watchList   let watchObj: Watches = {
    id: 0,
    value: 0
   }
    = ;
    = ;
   (watchObj);
  } else {
    = setInterval(() =&gt; {
     = ();
     =  +  - ;
   }, 43);
  }
 }
 stopWatch(event) {
   = 0;
  if () {
   clearInterval();
  }
 }
}

Principle: When you click startWatch for the first time, get the current time as the start time, and trigger the timer every 43ms to get the latest time. The time difference is the latest time minus the start time

PS: Here is another online tool with similar functions for your reference:

Online stopwatch tool:
http://tools./bianmin/miaobiao

For more information about AngularJS, readers who are interested in view the topic of this site:Summary of AngularJS command operation skills》、《AngularJS Introduction and Advanced Tutorial"and"AngularJS MVC architecture summary》

I hope this article will be helpful to everyone's AngularJS programming.