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

时间:2017-10-26 14:39:54

标签: javascript css timer

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

1 个答案:

答案 0 :(得分:0)

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

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

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

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

<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