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实现文本框中焦点在最后位置
Mar 04 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
两行代码轻松搞定JavaScript日期验证
Aug 03 Javascript
jQuery实现元素的插入
Feb 27 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
vue添加class样式实例讲解
Feb 12 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
element form 校验数组每一项实例代码
Oct 10 Javascript
koa-passport实现本地验证的方法示例
Feb 20 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正则匹配汉字的方法介绍
2013/04/25 PHP
php中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
2010年最佳jQuery插件整理
2010/12/06 Javascript
JavaScript实现点击文字切换登录窗口的方法
2015/05/11 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
python实现excel读写数据
2021/03/02 Python
Python中一般处理中文的几种方法
2019/03/06 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
Python wordcloud库安装方法总结
2020/12/31 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
星空联盟C# .net笔试题
2014/12/05 面试题
应付会计岗位职责
2013/12/12 职场文书
创业计划书怎样才能打动风投
2014/01/01 职场文书
打架检讨书2000字
2014/02/22 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
自我评价优缺点范文
2015/03/11 职场文书
杨善洲观后感
2015/06/04 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android