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指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》