javascript - 我在 JavaScript 中的秒表有问题

我正在 JavaScript 中制作秒表,但我的代码存在一些问题。它工作正常,但有一部分搞砸了。当毫秒小于 100 时,我点击停止然后重新开始,毫秒返回 0 并继续计数。我将在此处附上视频:https://drive.google.com/file/d/1CKezv6hYjRfunOC4GdkBJr5n0MsXybEB/view 这是我的代码:

function init(){
                  var myInterval;
                  var minutes;
                  var seconds;
                  var hundredths;
                  document.getElementById('btnStart').addEventListener("click", function(){   
                      if(document.getElementById("minutes").innerHTML !== "00"){
                          minutes = parseInt(document.getElementById("minutes").innerHTML);
                      } 
                      if(document.getElementById("hundredths").innerHTML !== "00"){
                          hundredths = parseInt(document.getElementById("hundredths").innerHTML);
                      }
                      if(document.getElementById("seconds").innerHTML !== "00"){
                         seconds = parseInt(document.getElementById("seconds").innerHTML);
                      } 
                      else{
                          hundredths = 0;
                          minutes = 0;
                          seconds = 0;
                      }  
                      myInterval = setInterval(function() {
                            hundredths++;
                            if(hundredths >= 10){  
                                document.getElementById("hundredths").innerHTML = hundredths;
                            }
                            if(hundredths <= 9){
                                document.getElementById("hundredths").innerHTML = "0" + hundredths;
                            }  
                            if(hundredths > 99){
                                hundredths = 0;  
                                seconds++;
                                if(seconds > 59){
                                    seconds = 0;
                                    hundredths = 0;
                                    minutes++; 
                                    if(minutes < 10){
                                        document.getElementById("minutes").innerHTML = "0" + minutes;
                                    }
                                    if(minutes >= 10){
                                        document.getElementById("minutes").innerHTML = minutes;
                                    }
                                }
                                if(seconds < 10){ 
                                     document.getElementById("seconds").innerHTML = "0" + seconds;   
                                }
                                if(seconds >= 10){
                                    document.getElementById("seconds").innerHTML = seconds;
                                }
                                
                            }                    
                          }, 10);      
                        });
                  document.getElementById('btnStop').addEventListener("click", function(){
                      clearInterval(myInterval);  
                      minutes = parseInt(document.getElementById("minutes").innerHTML);  
                      seconds = parseInt(document.getElementById("seconds").innerHTML); 
                      hundredths = parseInt(document.getElementById("hundredths").innerHTML); 
                      
                  });
                  document.getElementById('btnReset').addEventListener("click", function(){
                      clearInterval(myInterval);  
                      document.getElementById("minutes").innerHTML = "00";
                      document.getElementById("seconds").innerHTML = "00";
                      document.getElementById("hundredths").innerHTML = "00";
                  });
              }
<html>
    <head>
        <title>JS StopWatch</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #container{
                background-color: lightgreen;
                display:flex;
                flex-direction: column;
                align-items: center;
                margin-left: auto;
                margin-right: auto;
                width:35%;        
            }

            #buttonContainer{
                display: flex;
                flex-direction: row;
                justify-content: center;
                column-gap: 20px;
                margin-top: 20px;
                margin-bottom: 40px;

            }
            input{
                width:50%;
                border-radius: 10px;
                font-size: 2em;
            }
            span{
                font-size:2em;
            }
        </style>
        
        
    </head>
    <body onload = "init()">
        <div id="container">
            <div><h1>STOPWATCH</h1></div>
            <div><h1>MY JAVASCRIPT STOPWATCH</h1></div>  
            <div id="timeDisplay">
                <SPAN id="minutes">00</SPAN>:<SPAN id="seconds">00</SPAN>:<SPAN id="hundredths">00</SPAN>
            </div>
            <div id="buttonContainer">
                <input type="button" id="btnStart" value="Start">
                <input type="button" id="btnStop" value="Stop">
                <input type="button" id="btnReset" value="Reset">                
            </div>
        </div>
    </body>
</html>

回答1

你在这里搞砸了,你检查 seconds == 0 并更新 hundredths = 0。所以每次在到达 1 second 之前停止,毫秒都会更新为 0。

if(document.getElementById("seconds").innerHTML !== "00"){
   seconds = parseInt(document.getElementById("seconds").innerHTML);
}else{
   hundredths = 0;
   minutes = 0;
   seconds = 0;
}

注意:您的代码可以最小化,但我没有。自己做

更新代码

function init(){
                  var myInterval;
                  var minutes;
                  var seconds;
                  var hundredths;
                  document.getElementById('btnStart').addEventListener("click", function(){

                      if(document.getElementById("minutes").innerHTML !== "00"){
                          minutes = parseInt(document.getElementById("minutes").innerHTML);
                      } else {
                          minutes = 0;
                      }
                      
                      if(document.getElementById("hundredths").innerHTML !== "00"){
                          hundredths = parseInt(document.getElementById("hundredths").innerHTML);
                      } else {
                          hundredths = 0;
                      }
                      if(document.getElementById("seconds").innerHTML !== "00"){
                         seconds = parseInt(document.getElementById("seconds").innerHTML);
                      } else {
                          seconds = 0;
                      }  
                      myInterval = setInterval(function() {
                            hundredths++;
                            if(hundredths >= 10){  
                                document.getElementById("hundredths").innerHTML = hundredths;
                            }
                            if(hundredths <= 9){
                                document.getElementById("hundredths").innerHTML = "0" + hundredths;
                            }  
                            if(hundredths > 99){
                                hundredths = 0;  
                                seconds++;
                                if(seconds > 59){
                                    seconds = 0;
                                    hundredths = 0;
                                    minutes++; 
                                    if(minutes < 10){
                                        document.getElementById("minutes").innerHTML = "0" + minutes;
                                    }
                                    if(minutes >= 10){
                                        document.getElementById("minutes").innerHTML = minutes;
                                    }
                                }
                                if(seconds < 10){ 
                                     document.getElementById("seconds").innerHTML = "0" + seconds;   
                                }
                                if(seconds >= 10){
                                    document.getElementById("seconds").innerHTML = seconds;
                                }
                                
                            }                    
                          }, 10);      
                        });
                  document.getElementById('btnStop').addEventListener("click", function(){
                      clearInterval(myInterval);  
                      minutes = parseInt(document.getElementById("minutes").innerHTML);  
                      seconds = parseInt(document.getElementById("seconds").innerHTML); 
                      hundredths = parseInt(document.getElementById("hundredths").innerHTML); 
                      
                  });
                  document.getElementById('btnReset').addEventListener("click", function(){
                      clearInterval(myInterval);  
                      document.getElementById("minutes").innerHTML = "00";
                      document.getElementById("seconds").innerHTML = "00";
                      document.getElementById("hundredths").innerHTML = "00";
                  });
              }
<html>
    <head>
        <title>JS StopWatch</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #container{
                background-color: lightgreen;
                display:flex;
                flex-direction: column;
                align-items: center;
                margin-left: auto;
                margin-right: auto;
                width:35%;        
            }

            #buttonContainer{
                display: flex;
                flex-direction: row;
                justify-content: center;
                column-gap: 20px;
                margin-top: 20px;
                margin-bottom: 40px;

            }
            input{
                width:50%;
                border-radius: 10px;
                font-size: 2em;
            }
            span{
                font-size:2em;
            }
        </style>
        
        
    </head>
    <body onload = "init()">
        <div id="container">
            <div><h1>STOPWATCH</h1></div>
            <div><h1>MY JAVASCRIPT STOPWATCH</h1></div>  
            <div id="timeDisplay">
                <SPAN id="minutes">00</SPAN>:<SPAN id="seconds">00</SPAN>:<SPAN id="hundredths">00</SPAN>
            </div>
            <div id="buttonContainer">
                <input type="button" id="btnStart" value="Start">
                <input type="button" id="btnStop" value="Stop">
                <input type="button" id="btnReset" value="Reset">                
            </div>
        </div>
    </body>
</html>

回答2

通过 clearInterval 调用 stop 时,会保留最后一个 value 秒计时器,在开始新的计时器会话之前尝试将其重新初始化为零

stopTimer(){
   
   clearInterval(myInterval)
   minutes = 0;
   secons = 0;
   hours = 0
}