计时器结束后如何在计时器上显示警报

Question

I am using timer in JavaScript, I want that when my timer is finish it show me alert but right now my timer restart again with same time can any one guide me. how can I show alert in my timer when it finish.

 // properties var count = 0; var counter = null; window.onload = function() { initCounter(); }; function initCounter() { // get count from localStorage, or set to initial value of 1000 count = getLocalStorage('count') || 1000; counter = setInterval(timer, 1000); //1000 will run it every 1 second } function setLocalStorage(key, val) { if (window.localStorage) { window.localStorage.setItem(key, val); } return val; } function getLocalStorage(key) { return window.localStorage ? window.localStorage.getItem(key) : ''; } function timer() { count = setLocalStorage('count', count - 1); if (count == -1) { clearInterval(counter); return; } var seconds = count % 60; var minutes = Math.floor(count / 60); var hours = Math.floor(minutes / 60); minutes %= 60; document.getElementById("timer").innerHTML = seconds + " seconds left to complete this transaction"; // watch for spelling } 

 <div id="timer"></div> 

Answer 1

The issue you are facing is related to count . You set it to 1000 . So you will have to wait 1000 min before your function clearInterval(timer) is executed. You can try the following:

Timer restarts after reloading the page

 <script type="text/javascript"> // properties var count = 0; var counter = null; window.onload = function() { initCounter(); }; function initCounter() { // get count from localStorage, or set to initial value of 1000 count = 6000; counter = setInterval(timer, 1000); //1000 will run it every 1 second } function timer() { count = count -1; var seconds = count % 60; var minutes = Math.floor(count / 60); var hours = Math.floor(minutes / 60); minutes %= 60; if(seconds === 0) { clearInterval(counter); alert("terminated"); } document.getElementById("timer").innerHTML = seconds + " seconds left to complete this transaction"; // watch for spelling } </script> <div id="timer"></div> 

Timer remains unchanged even after restart

<script type="text/javascript">
  // properties
  var count = 0;
  var counter = null;

 window.onload = function() {
    initCounter();
  };

 function initCounter() {
    // get count from localStorage, or set to initial value of 1000
    if(!count || count < 0)
    {
        count = 1000;
    }
    counter = setInterval(timer, 1000); //1000 will  run it every 1 second
  }

 function setLocalStorage(key, val) {
    if (window.localStorage) {
      window.localStorage.setItem(key, val);
    }

   return val;
  }

 function getLocalStorage(key) {
    return window.localStorage ? window.localStorage.getItem(key) : '';
  }

 function timer() {
    count = setLocalStorage('count', count - 1);

   var seconds = count % 60;
    var minutes = Math.floor(count / 60);
    var hours = Math.floor(minutes / 60);
    minutes %= 60;

   if(seconds === 0)
    {
        clearInterval(counter);
        alert("terminated");
        }
   document.getElementById("timer").innerHTML =  seconds +  "  seconds left to complete this transaction"; // watch for spelling
  }
 </script>


 <div id="timer"></div>

It is not a snippet as the first one, because localstorage are disabled in snippet of stackoverflow