计时器完成后如何在计时器上显示警报 [英] How can I show alert on my timer when timer finished

问题描述

我在 JavaScript 中使用计时器，我希望当我的计时器完成时它会向我显示警报，但现在我的计时器在同一时间再次重新启动，任何人都可以指导我.完成后如何在我的计时器中显示警报.

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>

推荐答案

您面临的问题与 count 有关.您将其设置为 1000.因此，在执行函数 clearInterval(timer) 之前，您必须等待 1000 min.您可以尝试以下操作:

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:

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

<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

这篇关于计时器完成后如何在计时器上显示警报的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！