javascript实现一款好看的秒表计时器

时间：2022-09-19 13:33:34

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

实现图片：

分+秒+跑秒

javascript实现一款好看的秒表计时器

时+分+秒+跑秒

javascript实现一款好看的秒表计时器

需求分析：

1、显示整个秒表页面；

2、在点击“开始”按钮之后，开始计时，并将按钮转为“暂停”按钮，在点击“暂停”按钮之后，将按钮转为“开始”按钮，并停止计时；

3、在点击“复位”按钮之后，将显示的计时清零，并将按钮变回“开始”按钮。

页面结构：

  1. <div id="miaoBiao">
  2. <div id="dingShi">
  3. <p>
  4. <!-- <span id="houer">00</span> : -->
  5. <span id="minute">00</span> :
  6. <span id="second">00</span>&ensp;
  7. <span id="msecond">00</span>
  8. </p>
  9. <!-- 显示：时：分：秒 跑秒 ，“时”解除注释可使用 -->
  10. <button id="btn1">开始</button>
  11. <button id="reset">复位</button>
  12. </div>
  13. </div>

页面的主体结构主要包括四个span，包含四个秒表上显示的时间；以及两个按钮：“开始/暂停”与“复位”按钮。

一些函数：

id节点调用函数

  1. function jieDian(id){
  2. return document.getElementById(id);
  3. }

通过调用此函数可以简化页面代码

开始运行函数

  1. function startBtn(){
  2. timer1=setInterval(function(){
  3. i++
  4. jieDian("msecond").innerHTML =doubleLing(i%100);
  5. jieDian("second").innerHTML =doubleLing(parseInt(i/100)%60) ;
  6. jieDian("minute").innerHTML =doubleLing(parseInt(i/6000)%60) ;
  7. jieDian("houer").innerHTML =doubleLing(parseInt(i/360000)) ;
  8. },10)
  9. }
  10. //开始运行函数

暂停函数

  1. function pasueBtn(){
  2. clearInterval(timer1)
  3. }

赋0函数

  1. function doubleLing(i){
  2. if(i<10){
  3. return "0"+i
  4. }else{
  5. return i
  6. }
  7. }
  8. //赋0函数，当时分秒显示为个位数时，在前面加上“0”

完整代码，复制可用：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. #miaoBiao{
  9. width: 550px;height: 450px;background-color: #1d262d;overflow: hidden;
  10. margin: 50px auto;border-radius: 150px;
  11. }
  12. #dingShi{
  13. width: 400px;height: 230px;background-color:#d0eaeb;text-align: center;
  14. padding-top: 0px;margin: 110px auto;border-radius: 40px;
  15. }
  16. #dingShi p{
  17. font-size: 40px;padding-top: 40px;
  18. }
  19. #minute,#second,#houer{
  20. font-size: 56px;
  21. }
  22. #dingShi button{
  23. width: 80px;height: 35px;background-color: orange;margin: 10px auto;
  24. line-height: 35px;font-weight: bold;margin: 0px 20px;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <div id="miaoBiao">
  30. <div id="dingShi">
  31. <p>
  32. <span id="houer">00</span> :
  33. <span id="minute">00</span> :
  34. <span id="second">00</span>&ensp;
  35. <span id="msecond">00</span>
  36. </p>
  37. <!-- 显示：时：分：秒 跑秒 ，“时”解除注释可使用 -->
  38. <button id="btn1">开始</button>
  39. <button id="reset">复位</button>
  40. </div>
  41. </div>
  42.  
  43. <script>
  44. var i = 0;
  45. var timer1=null;
  46. var isRunning =false;
  47. //isRunning用于判断当前是否正在运行
  48. function jieDian(id){
  49. return document.getElementById(id);
  50. }
  51. //id节点调用函数
  52.  
  53. function startBtn(){
  54. timer1=setInterval(function(){
  55. i++
  56. jieDian("msecond").innerHTML =doubleLing(i%100);
  57. jieDian("second").innerHTML =doubleLing(parseInt(i/100)%60) ;
  58. jieDian("minute").innerHTML =doubleLing(parseInt(i/6000)%60) ;
  59. jieDian("houer").innerHTML =doubleLing(parseInt(i/360000)) ;
  60. },10)
  61. }
  62. //开始运行函数
  63.  
  64. function pasueBtn(){
  65. clearInterval(timer1)
  66. }
  67. //暂停函数
  68.  
  69. jieDian("btn1").onclick = function(){
  70. if(!isRunning){
  71. jieDian("btn1").innerHTML = "暂停";
  72. isRunning = true;
  73. startBtn();
  74. }else{
  75. jieDian("btn1").innerHTML="开始";
  76. isRunning = false;
  77. pasueBtn();
  78. }
  79. }
  80. //“开始”与“暂停”点击按钮：
  81. //当按钮显示为“开始”，点击之后，将按钮转为“暂停”按钮，并触发相应条件；
  82. //当按钮显示为“暂停”，点击之后，将按钮转为“开始”按钮，并触发相应条件。
  83.  
  84. jieDian("reset").onclick =function(){
  85. clearInterval(timer1)
  86. i = 0;
  87. isRunning = false;
  88. jieDian("btn1").innerHTML="开始";
  89. jieDian("msecond").innerHTML ="00";
  90. jieDian("second").innerHTML ="00";
  91. jieDian("minute").innerHTML ="00";
  92. jieDian("houer").innerHTML ="00";
  93. }
  94. //复位按钮，点击之后将秒表各值复位，并“暂停”秒表
  95.  
  96. function doubleLing(i){
  97. if(i<10){
  98. return "0"+i
  99. }else{
  100. return i
  101. }
  102. }
  103. //赋0函数，当时分秒显示为个位数时，在前面加上“0”
  104. </script>
  105. </body>
  106. </html>

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

原文链接：https://blog.csdn.net/horizon12/article/details/108374911

标签：

相关文章