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 相关文章推荐
CheckBox 如何实现全选?
Jun 23 Javascript
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
jquery异步调用页面后台方法‏(asp.net)
Mar 01 Javascript
js读取被点击次数的简单实例(从数据库中读取)
Mar 07 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
微信小程序实现animation动画
Jan 26 Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 Javascript
JavaScript实现优先级队列
Dec 06 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
海河写的 Discuz论坛帖子调用js的php代码
2007/08/23 PHP
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
网页前台通过js非法字符过滤代码(骂人的话等等)
2010/05/26 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
2017/09/12 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
Python中IPYTHON入门实例
2015/05/11 Python
python发送邮件功能实现代码
2016/07/15 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
退休感言
2014/01/28 职场文书
争先创优活动总结
2014/08/27 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
react 路由Link配置详解
2021/11/11 Javascript
python语言中pandas字符串分割str.split()函数
2022/08/05 Python