Here i have a simple javascript which i want to making a simple CountDownTimer with cancel and restarting features, unfortunately after starting timer using setInterval that's return only 4 number in console and i can't fix that. without assuming this problem clearInterval not working to which i want to support cancel and restart again this time
<script type="text/javascript">
var fiveMinutes = 5, display = document.querySelector('#time');
let myTimer = function (){
let timer = fiveMinutes, minutes, seconds;
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) {
$('#resend').show();
$('#time').hide();
clearInterval(this);
}
console.log(timer);
};
$('#startTimer').on('click', function(){
$('#resend').hide();
$('#time').show();
setInterval(myTimer , 1000);
});
</script>
Your code fixed below. The main problem was fiveMinutes permanently being reassigned to 5, which I solved with a closure. Also it was not multiplied by 60 to be converted in seconds.
const display = document.querySelector('#time');
let interval;
function myTimer (timer) {
return function () {
let minutes, seconds;
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) {
$('#resend').show();
$('#time').hide();
clearInterval(interval);
}
console.log(timer);
}
};
$('#startTimer').on('click', function () {
$('#resend').hide();
$('#time').show();
clearInterval(interval);
interval = setInterval(myTimer(5 * 60), 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="time"></div>
<button id="startTimer">Start</button>
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 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);
}
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 have a requirement of one minute timer in javascript in that as soon as 1 minute completed,Then show alert and halt script but in the code i try to change the condition but is not working,So i want after one minute alert should get and stop script
<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;
// alert(timer);
if (--timer < 0) {
timer = duration;
}
// if one minute is completed show alert and stop script
}, 1000);
}
window.onload = function () {
var oneMinutes = 60 * 1,
display = document.querySelector('#time');
startTimer(oneMinutes, display);
};
</script>
<script>
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var x=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;
// alert(timer);
if (--timer < 0) {
timer = duration;
alert('Timeup');
clearInterval(x); //script will stop and will not be execute
}
}, 1000);
}
window.onload = function () {
var oneMinutes = 60 * 1,
display = document.querySelector('#time');
startTimer(oneMinutes, display);
};
</script>
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>