Angular2实现的秒表及改良版示例
编程学习 2021-07-04 15:50www.dzhlxh.cn编程入门
这篇文章主要介绍了Angular2实现的秒表及改良版,结合实例形式分析 Angular2实现秒表功能的原理、操作技巧与相关注意事项,需要的朋友可以参考下
本文实例讲述了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：这里再为打击推荐一款功能相似的在线工具供大家参考：
在线秒表工具：
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《》、《》及《》
希望本文所述对大家AngularJS程序设计有所帮助。
上一篇：Vue项目中配置pug解析支持
下一篇：node中IO以及定时器优先级详解