CODEWITHSUNDEEP
javascripthtml
Khushbu Vaghela
Khushbu Vaghela

Reputation: 619

How to stop timer in javascript?

I want to stop a timer by clicking a button but I can't find the exact way. I've tried to stop a timer by clearInterval() but I'm not sure if it is called properly.

This is my working code.

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

Upvotes: 0

Views: 40553

Answers (6)

Kalalakshmi
Kalalakshmi

Reputation: 11

Stopwatch Timer Proper Code for 1 hour from 00:00:00 

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

Upvotes: 1

Sindhoor
Sindhoor

Reputation: 558

Made correction and Added "Start again" and "Clear" Button also. working fine.

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

Upvotes: 1

CforCODE
CforCODE

Reputation: 95

Add this 

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

and no need function myStopFunction() remove that

Upvotes: -1

John Willson
John Willson

Reputation: 455

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

Upvotes: -1

H.Mikhaeljan
H.Mikhaeljan

Reputation: 813

Add a global var in this case myTimer to hold the timer. in clearinterval use myTimer to stop the timer.

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

Upvotes: 2

Sherif
Sherif

Reputation: 1546

take that set interval into a variable then use clear interval

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

Upvotes: 15

Related Questions