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 While 循环基础教程
Apr 05 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 Javascript
Layui Form 自定义验证的实例代码
Sep 14 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 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边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
一步一步学习PHP(2)――PHP类型
2010/02/15 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
PHP curl使用实例
2015/07/02 PHP
一个简单的php路由类
2016/05/29 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
python selenium firefox使用详解
2019/02/26 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
python 元组的使用方法
2020/06/09 Python
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
大学校庆邀请函
2014/01/11 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python
CSS基础详解
2021/10/16 HTML / CSS