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>
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.