Angular2实现的秒表及改良版示例


Posted in Javascript onMay 10, 2019

本文实例讲述了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触发定时器,获取最新时间。时间差则为最新时间减去开始时间

Javascript 相关文章推荐
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
js克隆对象、数组的常用方法介绍
Sep 26 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
javaScript产生随机数的用法小结
Apr 21 Javascript
详解如何为你的angular app构建一个第三方库
Dec 07 Javascript
JavaScript实现背景自动切换小案例
Sep 27 Javascript
JS实现点星星消除小游戏
Mar 24 Javascript
node中IO以及定时器优先级详解
May 10 #Javascript
使用Node.js写一个代码生成器的方法步骤
May 10 #Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 #jQuery
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 #Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
May 09 #Javascript
微信小程序中显示倒计时代码实例
May 09 #Javascript
微信小程序日历弹窗选择器代码实例
May 09 #Javascript
You might like
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
Prototype 学习 Prototype对象
2009/07/12 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
jquery实现多行文字图片滚动效果示例代码
2014/10/10 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
Python中使用PDB库调试程序
2015/04/05 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
Python3 模块、包调用&路径详解
2017/10/25 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
Python中私有属性的定义方式
2020/03/05 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
新疆民族团结演讲稿
2014/08/27 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
2016年少先队活动总结
2016/04/06 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电