经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JS实现一个秒表计时器
来源:jb51  时间:2021/3/8 11:18:18  对本文有异议

本文实例为大家分享了JS实现秒表计时器的具体代码,供大家参考,具体内容如下

秒表计时器的实现:

效果图如下:

附代码,已调试运行

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>Document</title>
  9. <style>
  10. #div1 {
  11. width: 300px;
  12. height: 400px;
  13. background: skyblue;
  14. margin: 100px auto;
  15. text-align: center;
  16. }
  17. #count {
  18. width: 200px;
  19. height: 150px;
  20. line-height: 150px;
  21. margin: auto;
  22. font-size: 40px;
  23. }
  24. #div1 input {
  25. width: 150px;
  26. height: 40px;
  27. background: orange;
  28. font-size: 25px;
  29. margin-top: 20px
  30. }
  31. </style>
  32. </head>
  33.  
  34. <body>
  35. <div id="div1">
  36. <div id="count">
  37. <span id="id_H">00</span>
  38. <span id="id_M">00</span>
  39. <span id="id_S">00</span>
  40. </div>
  41. <input id="start" type="button" value="开始">
  42. <input id="pause" type="button" value="暂停">
  43. <input id="stop" type="button" value="停止">
  44. </div>
  45. <script>
  46. //可以将查找标签节点的操作进行简化 var btn = getElementById('btn')
  47. function $(id) {
  48. return document.getElementById(id)
  49. }
  50. window.onload = function() {
  51. //点击开始建 开始计数
  52. var count = 0
  53. var timer = null //timer变量记录定时器setInterval的返回值
  54. $("start").onclick = function() {
  55. timer = setInterval(function() {
  56. count++;
  57. console.log(count)
  58. // 需要改变页面上时分秒的值
  59. console.log($("id_S"))
  60. $("id_S").innerHTML = showNum(count % 60)
  61. $("id_M").innerHTML = showNum(parseInt(count / 60) % 60)
  62. $("id_H").innerHTML = showNum(parseInt(count / 60 / 60))
  63. }, 1000)
  64. }
  65. $("pause").onclick = function() {
  66. //取消定时器
  67. clearInterval(timer)
  68. }
  69. //停止记数 数据清零 页面展示数据清零
  70. $("stop").onclick = function() {
  71. //取消定时器
  72. $("pause").onclick()
  73. // clearInterval(timer)
  74. //数据清零 总秒数清零
  75. count = 0
  76. //页面展示数据清零
  77. $("id_S").innerHTML = "00"
  78. $("id_M").innerHTML = "00"
  79. $("id_H").innerHTML = "00"
  80. }
  81.  
  82. //封装一个处理单位数字的函数
  83. function showNum(num) {
  84. if (num < 10) {
  85. return '0' + num
  86. }
  87. return num
  88. }
  89. }
  90. </script>
  91. </body>
  92.  
  93. </html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

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

本站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号