HTML - コードが挿入されたときにタイマーを停止する

Question

私はユーザーがコードを挿入すると（つまり569）、止めることができるタイマーを作成しました。コードが挿入されたときにタイマーを止めるにはどうしたらいいですか？ただ今はちょうど「おめでとう、ミッション完了！」と表示されます。

function startTimer(duration, display) { 
 
\t \t var timer = duration, minutes, seconds; 
 
\t \t setInterval(function() { 
 
\t \t \t minutes = parseInt(timer/60, 10) 
 
\t \t \t seconds = parseInt(timer % 60, 10); 
 

 
\t \t \t minutes = minutes < 10 ? "0" + minutes : minutes; 
 
\t \t \t seconds = seconds < 10 ? "0" + seconds : seconds; 
 

 
\t \t \t display.textContent = minutes + ":" + seconds; 
 

 
\t \t \t if (--timer < 0) { 
 
\t \t \t \t document.getElementById("text").innerHTML = "You're dead"; 
 
\t \t \t } 
 
\t \t }, 1000); 
 
\t } 
 

 
\t \t window.onload = function() { 
 
    \t \t var Minutes = 60 * 0.5, 
 
     \t \t display = document.querySelector('#time'); 
 
    \t \t startTimer(Minutes, display); 
 
\t \t }; 
 
     
 
     function StopFunction() { 
 
\t \t \t var code; 
 
\t \t \t var rightcode=569; 
 
\t \t \t code = document.getElementById("icode").value; 
 
\t \t \t text = (code==rightcode) ? "Congratulation, mission complete!":"Sorry, wrong code, try again!"; 
 
\t \t \t if(code==rightcode){ 
 
\t \t \t \t display = document.getElementById("time").innerHTML = "Stop timer";} 
 
\t \t \t document.getElementById("text2").innerHTML =text; 
 
\t \t }

.btn { 
 
    border: none; 
 
    color: white; 
 
    padding: 14px 28px; 
 
    font-size: 16px; 
 
    cursor: pointer; 
 
} 
 

 
.success {background-color: #4CAF50;} /* Green */ 
 
.success:hover {background-color: #46a049;}

<div id="text">You have <span id="time"></span> minutes left!</div> 
 

 
<p id="text2"></p> 
 
<br> 
 
<p>Enter the code:</p> 
 
<input id="icode"/> 
 
<button class="btn success" onclick="StopFunction()">Check code</button>

Answer 1

次のコードでは、あなたの

var interval; 

function startTimer(duration, display) { 
     var timer = duration, minutes, seconds; 
     interval=setInterval(function() { 
      minutes = parseInt(timer/60, 10) 
      seconds = parseInt(timer % 60, 10); 

      minutes = minutes < 10 ? "0" + minutes : minutes; 
      seconds = seconds < 10 ? "0" + seconds : seconds; 

      display.textContent = minutes + ":" + seconds; 

      if (--timer < 0) { 
       document.getElementById("text").innerHTML = "You're dead"; 
      } 
     }, 1000); 
    } 

     window.onload = function() { 
      var Minutes = 60 * 0.5, 
       display = document.querySelector('#time'); 
      startTimer(Minutes, display); 
     }; 

     function StopFunction() { 
      var code; 
      var rightcode=569; 
      code = document.getElementById("icode").value; 
      text = (code==rightcode) ? "Congratulation, mission complete!":"Sorry, wrong code, try again!"; 
      if(code==rightcode){ 
       display = document.getElementById("time").innerHTML = "Stop timer";} 
      document.getElementById("text2").innerHTML =text; 
clearInterval(interval); 
     }