代码之家 › 专栏 › 技术社区 › Khushbu Vaghela

如何在javascript中停止计时器?

html javascript

Khushbu Vaghela · 技术社区 · 7 年前

我想通过单击按钮来停止计时器,但我找不到确切的方法。我试图阻止计时器 clearInterval() 但我不确定它是否被正确调用。

这是我的工作代码。

<html>
<head>
    <title>Bootstrap</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="setest_style.css">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script type="text/javascript">
      var sec = 0;
      
      function pad(val) {
        return val > 9 ? val : "0" + val;
      };
      
      setInterval( function(){
        $("#seconds").html(pad(++sec%60));
        $("#minutes").html(pad(parseInt(sec/60,10)));
      }, 1000);
      
      function myStopFunction() {
        clearInterval(sec);
      }
    </script>
</head>
<body>
    <div class="quiz-time">
        <div class="timer">
            <span id="minutes">00</span>:<span id="seconds">00</span>
        </div>
        <button href="#" id="show-explanation" class="button1" onclick="myStopFunction()">Stop</button>
    </div>
</body>

</html>

6 回复 | 直到 7 年前

Sherif 7 年前

将该设置的间隔取为变量,然后使用清除间隔

var myInterval = setInterval( function(){
          $("#seconds").html(pad(++sec%60));
          $("#minutes").html(pad(parseInt(sec/60,10)));
      }, 1000);
      function myStopFunction() {
              clearInterval(myInterval);
      }

H.Mikhaeljan 7 年前

在这种情况下添加全局var myTimer 保持计时器。在clearinterval中使用 我的计时器 停止计时器。

<html>
<head>
  	<title>Bootstrap</title>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1">
  	<link rel="stylesheet" type="text/css" href="setest_style.css">
  	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      var sec = 0;
      function pad ( val ) { return val > 9 ? val : "0" + val; }
      var myTimer= setInterval( function(){
          $("#seconds").html(pad(++sec%60));
          $("#minutes").html(pad(parseInt(sec/60,10)));
      }, 1000);
      function myStopFunction() {
              clearInterval(myTimer);
      }
    </script>
</head>
<body>  
 <div class="quiz-time">
        <div class="timer">
            <span id="minutes">00</span>:<span id="seconds">00</span>
        </div>
        <button href="#" id="show-explanation" class="button1" onclick="myStopFunction()">Stop</button>
    </div>
</body>

</html>

Sindhoor 7 年前

进行了更正,并添加了“重新开始”和“清除”按钮。工作正常。

<html>
<head>
  	<title>Bootstrap</title>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1">
  	<link rel="stylesheet" type="text/css" href="setest_style.css">
  	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      var sec = 0;
      function pad ( val ) { return val > 9 ? val : "0" + val; }
var func;
  

    function timerstart(){
func = setInterval( function(){
              $("#seconds").html(pad(++sec%60));
              $("#minutes").html(pad(parseInt(sec/60,10)));
          }, 1000);
}
timerstart();

          function myStopFunction() {
                  clearInterval(func);
          }
function myClearFunction(){
myStopFunction();
$("#seconds").html(pad(00));
              $("#minutes").html(pad(00));
sec = 0;
}
    </script>
</head>
<body>  
 <div class="quiz-time">
        <div class="timer">
            <span id="minutes">00</span>:<span id="seconds">00</span>
        </div>
    

    <button href="#" id="show-explanation" class="button1" onclick="myStopFunction()">Stop</button>
 <button href="#" id="show-explanation" class="button1" onclick="timerstart()">Start Again</button>
<button href="#" id="show-explanation" class="button1" onclick="myClearFunction();">Clear</button>
    </div>
</body>

</html>

Kalalakshmi 5 年前

秒表计时器正确代码从00:00:00持续1小时

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
var upgradeTime = 1;
var seconds = upgradeTime;
function timer() {
  var days        = Math.floor(seconds/24/60/60);
  var hoursLeft   = Math.floor((seconds) - (days*86400));
  var hours       = Math.floor(hoursLeft/3600);
  var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
  var minutes     = Math.floor(minutesLeft/60);
  var remainingSeconds = seconds % 60;
  function pad(n) {
    return (n < 10 ? "0" + n : n);
     
  }
  document.getElementById('countdown').innerHTML =pad(hours) + ":" + pad(minutes) + ":" + pad(remainingSeconds);
  if (seconds == 3600) {
    clearInterval(countdownTimer);
    document.getElementById('countdown').innerHTML = "Completed";
  } else {
    seconds++;
  }
}
var countdown = setInterval('timer()', 1000);

</script>
</head>
<body>
<span id="countdown" class="timer"></span>
</body>

</html>

-1

John Willson 7 年前

<html>
<head>
  	<title>Bootstrap</title>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1">
  	<link rel="stylesheet" type="text/css" href="setest_style.css">
  	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      var sec = 0;
      function pad ( val ) { return val > 9 ? val : "0" + val; }
    var setIntValue =   setInterval( function(){
          $("#seconds").html(pad(++sec%60));
          $("#minutes").html(pad(parseInt(sec/60,10)));
      }, 1000);
      function myStopFunction() {
              clearInterval(setIntValue);
      }
    </script>
</head>
<body>  
 <div class="quiz-time">
        <div class="timer">
            <span id="minutes">00</span>:<span id="seconds">00</span>
        </div>
        <button href="#" id="show-explanation" class="button1" onclick="myStopFunction()">Stop</button>
    </div>
</body>

</html>

-1

Mickaël Leger 7 年前

添加此

setTimeout(function(){
   clearInterval(sec);
}, 1000);

而且没有必要 function myStopFunction() 删除该选项