Angular2实现的秒表及改良版示例
本文实例讲述了Angular2实现的秒表及改良版。分享给大家供大家参考，具体如下：
初版
代码：
exportclassWatches{
id:number;
str:string;
}
exportletwatcheList: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.
缺点：
函数的运行时间不可控，所以毫秒的增加不准确。
改良版
代码：
//秒表
exportclassWatches{
id:number;
value:number;
}
exportletwatcheList:Watches[]=[]
exportclassStopwatchComponent{
//导入的静态类
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
letwatchObj: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入门与进阶教程》及《AngularJSMVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。