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 相关文章推荐
JAVASCRIPT IE 与 FF中兼容问题小结
Feb 18 Javascript
两种常用的javascript数组去重方法思路及代码
Mar 26 Javascript
jQuery获取浏览器中的分辨率实现代码
Apr 23 Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 Javascript
jquery使用$(element).is()来判断获取的tagName
Aug 24 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
JS常用倒计时代码实例总结
Feb 07 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 Javascript
JS跨浏览器解析XML应用过程详解
Oct 16 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/04/17 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
探讨如何把session存入数据库
2013/06/07 PHP
如何在PHP中使用正则表达式进行查找替换
2013/06/13 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
PHP数据库操作三:redis用法分析
2017/08/16 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
jQuery select的操作实现代码
2009/05/06 Javascript
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
Jquery基础之事件操作详解
2016/06/14 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
express框架下使用session的方法
2019/07/31 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
Python中取整的几种方法小结
2017/01/06 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
使用python实现名片管理系统
2020/06/18 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
Python实现自动装机功能案例分析
2020/10/22 Python
小学教师师德感言
2014/02/10 职场文书