javascript - 计时器完成后如何在计时器上显示警报

Question

我在 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 = 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

您遇到的问题与count有关。您将其设置为1000。因此，在执行函数 clearInterval(timer) 之前，您必须等待 1000 分钟。您可以尝试以下方法:

重新加载页面后计时器重新启动

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

即使重启后计时器也保持不变

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

它不是第一个片段，因为 localstorage 在 stackoverflow 的片段中被禁用