I can't seems to be able to stop the timer when it reaches zero. It will just repeat back to the original timing! See my codes below.
What I am trying to achieve is, once timer is 0, it will replace 00:00 with the text "Your time is up".
HTML:
<div class="quizTimer right">
<span>Timer:<br /><span id="qTimer"></span></span>
</div>
This is the Javascript which I did:
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
console.log(display.textContent);
if (--timer < 0) {
timer = duration;
clearInterval(timer); // this piece of code didnt stop the timer
}
}, 1000);
}
window.onload = function () {
var oneMinute = 10 * 1,
display = document.querySelector('#qTimer');
startTimer(oneMinute, display);
};
clearInterval() expects a reference to the interval to be passed.
You're passing timer, which is not a reference to the interval - it's an integer from the passed-in function param.
Assign your interval to a variable and reference that when you want to clear it.
let foo = setInterval(() => {
/* code... */
clearInterval(foo);
}, 1000);
You just need to capture the interval id returned by setInterval() and use that:
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var id = setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
console.log(display.textContent);
if (--timer < 0) {
timer = duration;
clearInterval(id); // uses returned id
}
}, 1000);
}
Related
In this JSfiddle, I have a code where if you click on the button, it automatically creates another set interval within the old one,
I have clearInterval but for some reason, it's not working
(Try clicking on the timer button multiple times)
<span>LIVE: Election results will refresh in <span id="time">2:00</span> minutes.</span>
<input type="button" value="Timer" id="btn">
<script>
$("#btn").on('click', function() {
var twoMinutes = 60 * 2,
display = document.querySelector('#time');
startTimer(twoMinutes, display);
});
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
var interval;
clearInterval(interval);
interval = setInterval(function() {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? +minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
LoadCandidatesCharts(true);
}
}, 1000);
} </script>
enter link description here
Problem is because you're calling the interval var within the function scope, while you should be declaring it on a global scope, try this
var interval; // global var
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
clearInterval(interval);
interval = setInterval(function() {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? +minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
LoadCandidatesCharts(true);
}
}, 1000);
}
I hardly have knowledge of jquery. I am trying to make a countdown so after searching I found the code below.
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
$('.start').on('click', function(){
var oneMinute = 60 * 1,
display = document.querySelector('#time');
startTimer(oneMinute, display);
})
But the countdown repeats after one minute. Like when it goes 03, 02, 01, it again starts with 59.
How to stop it?
I want to alert message and stop timer after given minutes.
The setInterval function returns an identifier. Store the interval ID in a variable. This allows you to use clearInterval() to cancel the interval when required.
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var interval = setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
clearInterval(interval);
}
}, 1000);
}
$('.start').on('click', function(){
var oneMinute = 5 * 1, // 5 Seconds for easy testing
display = document.querySelector('#time');
startTimer(oneMinute, display);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="time">
00:00
</div>
<button type="button" class="start">
START
</button>
You need to store the interval ID and use clearInterval(intervalId); to stop it.
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var intervalId = setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
clearInterval(intervalId);
}
}, 1000);
}
$('.start').on('click', function(){
var oneMinute = 60 * 1,
display = document.querySelector('#time');
startTimer(oneMinute, display);
})
I need the timer to reset when you click a button. I need the reset button because the user can revisit a timer multiple times but the timer displays the timer time from when it was previously used + the timers current time.
Here is a snippet of one of the timers with it's designated button
Link to code: http://jsfiddle.net/bw2dfkyu/
<script>
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = 0;
}
}, 1000);
}
function start5Timer() {
var fiveMinutes = 60 * 5,
display5 = document.querySelector('#time5');
startTimer(fiveMinutes, display5);
}
function show5Timer() {
document.getElementById("button").style.display = "none";
document.getElementById("timer5").style.display = "block";
}
</script>
<button id="button" onclick= "show5Timer(); start5Timer();">Starts and Shows Timer</button>
<div id=timer5 style ="display:none">
<h1><span id="time5">5:00</span></h1>
<p>click next when the timer ends *clicking nextBtn takes them to another div, I want this to also restart the time*</p>
<button onclick="takeToNextDiv(); #();">
next
</button>
</div>
you need to save the interval return value, in order to use it later and delete the interval, and by doing so, resetting the timer and starting it over.
the setInterval returns an integer, on which you can call the clearInterval function.
var interval;
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
if(interval)
clearInterval(interval)
interval = setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = 0;
}
}, 1000);
}
i'm new to JavaScript and i want this code to start with a click of a button and also in every click it should start a new different timer from zero. anyone here to help!
// add a count-down timer
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
var butt = window.document.getElementById('button');
window.onload = function () { //i tried using ' butt.onclick' but this did not work
var fiftenMinutes = 60 * 15,
display = document.querySelector('#time');
startTimer(fiftenMinutes, display);
};
<h3 id="time" class="divTime"></h3>
First you need to add a button with an id of "button" to make your code work:
<button id="button">Button Text</button>
Next, each time you click the button, you want the previous interval to be cancelled, otherwise you'll end up with more and more intervals changing the content of the h3:
var intervalId
...
if (intervalId) clearInterval(intervalId)
intervalId = setInterval(function() {})
This leaves us with the following:
var intervalId;
// add a count-down timer
function startTimer(duration, display) {
if (intervalId) clearInterval(intervalId);
var timer = duration, minutes, seconds;
intervalId = setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
var butt = window.document.getElementById('button');
butt.onclick = function () { //i tried using ' butt.onclick' but this did not work
var fiftenMinutes = 60 * 15,
display = document.querySelector('#time');
startTimer(fiftenMinutes, display);
};
<h3 id="time" class="divTime"></h3>
<button id="button">Button Text</button>
If you want a different timer each time you click, you need to add an element dynamically to the DOM to hold it.
// add a count-down timer
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
setInterval(function() {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function() { //i tried using ' butt.onclick' but this did not work
var fiftenMinutes = 60 * 15,
display = document.querySelector('#time');
startTimer(fiftenMinutes, display);
};
var butt = window.document.getElementById('button');
butt.addEventListener("click", function() {
var new_h3 = document.createElement("h3");
document.body.appendChild(new_h3);
startTimer(60*15, new_h3);
})
<h3 id="time" class="divTime"></h3>
<button id="button">Start timer</button>
Just add event listener to the button and clear already set timer, if it has been set. Run the following snippet.
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
return setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds + ' Click to Restart';
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
var timerID = null;
// replace 'time' if the h3 element isn't the button.
document.getElementById( 'time' ).addEventListener( 'click', function() {
if ( timerID ) {
clearInterval( timerID );
}
var fiftenMinutes = 60 * 15,
display = document.querySelector('#time');
timerID = startTimer(fiftenMinutes, display);
})
<h3 id="time" class="divTime">Click To Start Timer</h3>
I'm trying to create a timer for 30 seconds and i'm looking to do this on my own, however I seem to be stuck here:
var Starttime = ( needs to be 30 seconds )
var Timeleft = Starttime - 1
if (Timeleft === 0) {
console.log("TIMER FINISHED BEEP BOOP");
}
and through lots of research still not able to find how to declare variable as a simple 30 seconds of time, and I am aware that I would need to do the same for the 1 ( change it to 1 second). TL;DR how do I write 30 seconds
try this function using setinterval() :
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
//this is where you can modifies the time amount.
var minutes= 60 ,
display = document.querySelector('#time');
startTimer(minutes, display);
};
<body>
<div>One minute countdown <span id="time">1:00</span> minutes!</div>
</body>