经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » AngularJS2 » 查看文章
Angular2实现的秒表及改良版示例
来源:jb51  时间:2019/5/10 10:18:21  对本文有异议

本文实例讲述了Angular2实现的秒表及改良版。分享给大家供大家参考,具体如下:

初版

代码:

  1. export class Watches {
  2. id: number;
  3. str: string;
  4. }
  5. export let watcheList: Watches[] = [{
  6. id: 0, str: '123456'
  7. }, {
  8. id: 1, str: '564822'
  9. }]
  10. //watchList 是一个静态类
  11. watchList = watcheList;
  12. watchStr: string;
  13. //判断是否是第一次点击startWatch
  14. num: number = 0;
  15. //分 秒 毫秒
  16. minute: number = 0;
  17. second: number = 0;
  18. millisecond: number = 0;
  19. //临时变量 存储计次时的时间,后加入watcheList数组
  20. temp= {
  21. id: 0,
  22. str: '0'
  23. };
  24. //定时器的名字
  25. inter: any;
  26. constructor() { }
  27. resetWatch() {
  28. //清零
  29. this.millisecond = 0;
  30. this.second = 0;
  31. this.minute = 0;
  32. this.temp.str = '000000';
  33. watcheList.length = 0;
  34. }
  35. timer() {
  36. //每隔43ms,调用该函数,所以增加43
  37. this.millisecond = this.millisecond + 43;
  38. if (this.millisecond >= 1000) {
  39. this.millisecond = 0;
  40. this.second = this.second + 1;
  41. }
  42. if (this.second >= 60) {
  43. this.second = 0;
  44. this.minute = this.minute + 1;
  45. }
  46. //当小于10是,在前面加一个0,形式则变为00:00:00
  47. this.watchStr = (this.minute > 10 ? this.minute : '0' + this.minute) + ':'
  48. + (this.second > 10 ? this.second : '0' + this.second) + ':'
  49. + (this.millisecond > 10 ? this.millisecond : '0' + this.millisecond);
  50. }
  51. startWatch(event) {
  52. this.num = this.num + 1;
  53. if (this.num > 1) {
  54. //该状态应该为计次
  55. temp.id = this.watchList.length;
  56. temp.str = this.watchStr;
  57. this.watchList.push(temp);
  58. } else {
  59. this.inter = setInterval(() => {
  60. this.timer();
  61. }, 43);
  62. }
  63. }
  64. stopWatch(event) {
  65. this.num = 0;
  66. if (this.inter) {
  67. clearInterval(this.inter);
  68. }
  69. }
  70. }
  71.  

原理:

在计时器timer函数里面,定义了一个变量毫秒millisecond,每隔43ms调用timer函数,所以millisecond每次增加43,而后1000ms之后seond增加1,60s之后,minute增加1.

缺点:

函数的运行时间不可控,所以毫秒的增加不准确。

改良版

代码:

  1. // 秒表
  2. export class Watches {
  3. id: number;
  4. value: number;
  5. }
  6. export let watcheList: Watches[] = []
  7. export class StopwatchComponent {
  8. //导入的静态类
  9. watchList = watcheList;
  10. //临时变量,用来存贮计次时的时间
  11. temp: number;
  12. //判断startWatch是第一次开始,还是计次
  13. num: number = 0;
  14. //开始时间
  15. startTime: number;
  16. //当前时间
  17. nowTime: number;
  18. //时间差
  19. timerRunner: number = 0;
  20. //interval函数的名称
  21. inter: any;
  22. constructor() { }
  23. resetWatch() {
  24. //清零
  25. this.timerRunner = 0;
  26. this.watchList.length = 0;
  27. }
  28. startWatch(event) {
  29. this.temp = this.timerRunner;
  30. //开始计时的时间
  31. this.startTime = Date.now();
  32. this.num = this.num + 1;
  33. if (this.num > 1) {
  34. //当前状态为计时,将计时的数据加入进watchList
  35. let watchObj: Watches = {
  36. id: 0,
  37. value: 0
  38. }
  39. watchObj.id = this.watchList.length;
  40. watchObj.value = this.timerRunner;
  41. this.watchList.push(watchObj);
  42. } else {
  43. this.inter = setInterval(() => {
  44. this.nowTime = Date.now();
  45. this.timerRunner = this.temp + this.nowTime - this.startTime;
  46. }, 43);
  47. }
  48. }
  49. stopWatch(event) {
  50. this.num = 0;
  51. if (this.inter) {
  52. clearInterval(this.inter);
  53. }
  54. }
  55. }
  56.  

原理:当第一次点击startWatch时,获取当前时间作为开始时间,并每43ms触发定时器,获取最新时间。时间差则为最新时间减去开始时间

PS:这里再为打击推荐一款功能相似的在线工具供大家参考:

在线秒表工具:
http://tools.jb51.net/bianmin/miaobiao

更多关于AngularJS相关内容感兴趣的读者可查看jb51专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结

希望本文所述对大家AngularJS程序设计有所帮助。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号