Question

我想通过点击一个按钮停止计时器，但我找不到确切的方法。我试图通过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>

Answer 1

将该设置间隔转换为变量，然后使用清除间隔

//Get the date (22/03/2018)
     $start=$_POST['start']; 

//Remove the /and replace with -
    $starttime = str_replace('/', '-', $start);

convert the format to y-m-d
    $starttime=date('Y-m-d', strtotime($starttime));

Answer 2

在这种情况下添加一个全局变量myTimer来保存计时器。在clearinterval中使用myTimer来停止计时器。

<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>

Answer 3

进行了修正并添加了“再次开始”和“清除”按钮。工作正常。

<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>

Answer 4

Stopwatch计时器正确代码从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>

Answer 5

<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>

Answer 6

添加此

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

并且无需function myStopFunction()删除

如何在JavaScript中停止计时器？

6 个答案: