I'm trying to create a simple vanilla JS stopwatch. Managed to make it work however when I click my reset button, the value returns my innerHTML change, however it flashes for a quick second before returning a value of 00:00:1 and not 00:00:00. I would have to click it two times before it resets correctly. However, when I pause my timer then reset, it works perfectly. Where is the flaw in my code?
Code:
var status = 0;
var time = 0;
document.getElementById('start').addEventListener('click', start);
document.getElementById('pause').addEventListener('click', pause);
document.getElementById('reset').addEventListener('click', reset);
function start() {
status = 1;
document.getElementById('start').disabled = true;
timer();
}
function pause() {
status = 0;
document.getElementById('start').disabled = false;
}
function reset() {
time = 0;
status = 0;
document.getElementById('label').innerHTML = '00:00:00';
document.getElementById('start').disabled = false;
}
function timer() {
if (status == 1) {
setTimeout(function() {
time++;
var min = Math.floor(time / 10 / 60);
var sec = Math.floor(time / 10 % 60);
var mill = time % 10;
if (min < 10) {
min = '0' + min;
}
if (sec >= 60) {
sec = sec % 60;
}
if (sec < 10) {
sec = '0' + sec;
}
document.getElementById('label').innerHTML = min + ':' + sec + ':' + mill;
timer();
}, 100);
}
}
<div id="wrapper">
<h1 id="label">00:00:00</h1>
<button id="start">Start</button>
<button id="pause">Pause</button>
<button id="reset">Reset</button>
</div>
It's because of the setTimeout, since it's scheduled to run each 100ms, it will run once after you click reset (after a 100ms). In order to prevent it from running after reset, you can store the timeout in a variable and stop it using clearTimeout:
var status = 0;
var time = 0;
var t; // the timeout
document.getElementById('start').addEventListener('click', start);
document.getElementById('pause').addEventListener('click', pause);
document.getElementById('reset').addEventListener('click', reset);
function start() {
status = 1;
document.getElementById('start').disabled = true;
timer();
}
function pause() {
status = 0;
document.getElementById('start').disabled = false;
}
function reset() {
time = 0;
status = 0;
clearTimeout(t); // stop the timeout
document.getElementById('label').innerHTML = '00:00:00';
document.getElementById('start').disabled = false;
}
function timer() {
if (status == 1) {
t = setTimeout(function() { // start the timeout
time++;
var min = Math.floor(time / 10 / 60);
var sec = Math.floor(time / 10 % 60);
var mill = time % 10;
if (min < 10) {
min = '0' + min;
}
if (sec >= 60) {
sec = sec % 60;
}
if (sec < 10) {
sec = '0' + sec;
}
document.getElementById('label').innerHTML = min + ':' + sec + ':' + mill;
timer();
}, 100);
}
}
<div id="wrapper">
<h1 id="label">00:00:00</h1>
<button id="start">Start</button>
<button id="pause">Pause</button>
<button id="reset">Reset</button>
</div>
The reason is that I believe there is a slight latency and you aren't actually clearing the timeout that gets run when you start. It's good practice to keep track of the timeout ID and then clear it appropriately when you need to.
var status = 0;
var time = 0;
var timeoutId;
document.getElementById('start').addEventListener('click', start);
document.getElementById('pause').addEventListener('click', pause);
document.getElementById('reset').addEventListener('click', reset);
function start() {
status = 1;
document.getElementById('start').disabled = true;
timer();
}
function pause() {
status = 0;
document.getElementById('start').disabled = false;
}
function reset() {
time = 0;
status = 0;
clearTimeout(timeoutId);
document.getElementById('label').innerHTML = '00:00:00';
document.getElementById('start').disabled = false;
}
function timer() {
if (status == 1) {
timeoutId = setTimeout(function() {
time++;
var min = Math.floor(time / 10 / 60);
var sec = Math.floor(time / 10 % 60);
var mill = time % 10;
if (min < 10) {
min = '0' + min;
}
if (sec >= 60) {
sec = sec % 60;
}
if (sec < 10) {
sec = '0' + sec;
}
document.getElementById('label').innerHTML = min + ':' + sec + ':' + mill;
timer();
}, 100);
}
}
<div id="wrapper">
<h1 id="label">00:00:00</h1>
<button id="start">Start</button>
<button id="pause">Pause</button>
<button id="reset">Reset</button>
</div>
Its realy simple you have to remove the setTimeout callback function
var timerObj = null; // NEW LINE
var status = 0;
var time = 0;
document.getElementById('start').addEventListener('click', start);
document.getElementById('pause').addEventListener('click', pause);
document.getElementById('reset').addEventListener('click', reset);
function start() {
status = 1;
document.getElementById('start').disabled = true;
timer();
}
function pause() {
status = 0;
document.getElementById('start').disabled = false;
}
function reset() {
clearTimeout(timerObj ); // new LINE
status = 0;
document.getElementById('start').disabled = false;
time = 0;
document.getElementById('label').innerHTML = '00:00:00';
}
function timer() {
if (status == 1) {
timerObj = setTimeout(function() { // changed LINE
time++;
var min = Math.floor(time / 10 / 60);
var sec = Math.floor(time / 10 % 60);
var mill = time % 10;
if (min < 10) {
min = '0' + min;
}
if (sec >= 60) {
sec = sec % 60;
}
if (sec < 10) {
sec = '0' + sec;
}
document.getElementById('label').innerHTML = min + ':' + sec + ':' + mill;
timer();
}, 100);
}
}
<div id="wrapper">
<h1 id="label">00:00:00</h1>
<button id="start">Start</button>
<button id="pause">Pause</button>
<button id="reset">Reset</button>
</div>
Related
<script>
var minutes = 1;
var seconds = 45;
$(document).ready(function () {
setInterval(startTimer, 1000);
});
function startTimer() {
document.getElementById("timer").innerHTML = (minutes - 1) + ":" + --seconds;
if (seconds == 0) {
minutes--;
if (minutes != 0) {
seconds = 60;
} else {
seconds = 0;
}
}
if (minutes == 0 && seconds == 0) {
document.getElementById('next').click();
minutes = 1;
seconds = 45;
}
}
</script>
This is my code for the timer and it should restart after button click whose id is #next. I did many things but it won't work. Please help.
Button Id = Next
Here's my solution to your issue.
I've noticed $(document).ready() so I instantly presumed you are
using jQuery.
var timerInterval is a direct reference to the timer that you started.
To stop the timer, use clearInterval(timerInterval) [Same story goes for setTimeout()].
I've changed your countdown timer because I couldn't be bothered fixing it.
var timerInterval;
let minutes = 2;
let seconds = 42;
let duration = (minutes * 60) + seconds;
let display = document.querySelector('#timer');
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
timerInterval = 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;
clearInterval(timerInterval);
}
}, 1000);
}
startTimer(duration, display);
$('button').click((e) => {
clearInterval(timerInterval);
startTimer(duration, display);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="timer"></span>
<br>
<button>Reset Timer</button>
You should not rely on setInterval (or setTimeout) to calculate a time value. It is not guaranted to be called at the specified interval. I believe in some case it could also be paused by the browser.
You could try something like this :
<span id='timer'></span>
<button id='next'>Next</button>
<script>
var btn = document.getElementById('next');
btn.addEventListener('click', function(e) {
// 10 is the duration in seconds
startNextTimer(10, function() { alert('done!');} );
});
function startNextTimer(numSecondsDuration, callback) {
var label = document.getElementById('timer');
var endDate = new Date();
endDate.setSeconds(endDate.getSeconds() + numSecondsDuration);
var calcTimeLeft = function() { return Math.ceil((endDate - (new Date())) / 1000); };
label.innerHTML = calcTimeLeft() + " secs";
var intervalId = setInterval(function() {
var numSecondsLeft = calcTimeLeft();
if (numSecondsLeft <= 0) {
clearInterval(intervalId);
if (callback) {
callback();
}
}
label.innerHTML = numSecondsLeft + " secs";
}, 500);
}
</script>
Without the html I can't give you step by step but basically, you need to clear the interval before you can restart it.
<script>
var minutes = 1;
var seconds = 45;
var interval_id=setInterval(startTimer, 1000);
$('#next').on("click",function(){
clearInterval(interval_id);
minutes = 1;
seconds = 45;
document.getElementById("timer").innerHTML ="";
interval_id=setInterval(startTimer, 1000);
});
function startTimer() {
document.getElementById("timer").innerHTML = (minutes - 1) + ":" + --seconds;
if (seconds == 0) {
minutes--;
if (minutes != 0) {
seconds = 60;
} else {
seconds = 0;
}
}
if (minutes == 0 && seconds == 0) {
minutes = 1;
seconds = 45;
}
}
</script>
I have created a countdown timer and am trying to add 2 minutes into the existing timer to extend the timer.
My Code
function CountDownTimer(duration, granularity) {
this.duration = duration;
this.granularity = granularity || 1000;
this.tickFtns = [];
this.running = false;
}
CountDownTimer.prototype.start = function() {
if (this.running) {
return;
}
this.running = true;
var start = Date.now(),
that = this,
diff, obj;
(function timer() {
diff = that.duration - (((Date.now() - start) / 1000) | 0);
if (diff > 0) {
setTimeout(timer, that.granularity);
} else {
diff = 0;
that.running = false;
}
obj = CountDownTimer.parse(diff);
that.tickFtns.forEach(function(ftn) {
ftn.call(this, obj.minutes, obj.seconds);
}, that);
}());
};
CountDownTimer.prototype.onTick = function(ftn) {
if (typeof ftn === 'function') {
this.tickFtns.push(ftn);
}
return this;
};
CountDownTimer.prototype.expired = function() {
return !this.running;
};
CountDownTimer.parse = function(seconds) {
return {
'minutes': (seconds / 60) | 0,
'seconds': (seconds % 60) | 0
};
};
$(document).ready(function() {
var counter = 0;
var display = document.querySelector('#time'),
//timer = new CountDownTimer(600);
timer = new CountDownTimer(125); // for debug
timer.onTick(format).onTick(restart).start();
function restart() {
if (this.expired()) {
alert("Expired");
}
}
function format(minutes, seconds) {
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ':' + seconds;
if (minutes < 2) {
if (counter == 0) {
alert("Extending Time");
counter++;
}
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="time"></span> minutes
I managed to trigger an event that after 2 minutes will show an alert that the time will be extended, but so far, I can't think of any method or functions I can use to add the extra time. Is there any way I can do this?
Add code as following:
CountDownTimer.prototype.reset = function (duration) {
this.duration = duration;
}
and rewrite function format as :
function format(minutes, seconds) {
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ':' + seconds;
if (minutes < 2) {
if (counter == 0) {
//alert("Extending Time");
timer.reset(timer.duration + 120);
counter++;
}
}
}
You can add code in CountDownTimer.prototype.start before setTimeout like:
this.instance = setTimeout(...)
add function:
CountDownTimer.prototype.kill = function() {
clearTimeout(this.instance)
}
call function kill to stop timer permanently.
Here i am facing one problem i am preparing quiz application in php
i face one problem when users starts the test the timer is running properly. when user go for second question the timer starts again
here is my code:-
window.onload = start();
var mins = 10;
var secs = 0;
var timer;
function start() {
timer = setInterval(
function() {
update();
}, 1000);
}
function update() {
var timeField = document.getElementById('time');
if (secs == 0) {
if (mins == 0) {
timeField.innerHTML = 'Times up!';
clearInterval(timer);
alert('Times up');
return;
}
mins--;
secs = 59;
} else {
secs--;
}
if (secs < 10) {
timeField.innerHTML = 'Time left: ' + mins + ':0' + secs;
} else {
timeField.innerHTML = 'Time left: ' + mins + ':' + secs;
}
}
<div id="time" > </div>
you need to store the time on cookies or localStorage, or using server time. here is the code using localStorage
window.onload = start();
var timer;
function start() {
var mins = 10;
var secs = 0;
var end = parseInt(localStorage.getItem('end'));
var time;
if (! isNaN(end)) {
time = Math.floor((end - Date.now()) / 1000);
} else {
time = mins * 60 + secs
localStorage.setItem('end', (Date.now() + (time * 1000)));
}
timer = setInterval(update(time), 1000);
}
function update(time) {
return function() {
var timeField = document.getElementById('time');
if (time <= 0) {
timeField.innerHTML = 'Times up!';
clearInterval(timer);
alert('Times up');
return;
} else {
time--;
}
var mins = Math.floor(time / 60);
var secs = time % 60;
if (secs < 10) {
timeField.innerHTML = 'Time left: ' + mins + ':0' + secs;
} else {
timeField.innerHTML = 'Time left: ' + mins + ':' + secs;
}
}
}
<div id="time" > </div>
I'm coding a simple countdown timer in javascript, with play and pause buttons. It works fine when I start it, but if I pause/play a few times the timer values changes randomly, I can't figure out why.
Here's my code :
var minutesleft = 60;
var secondsleft = 0;
var millisecondsleft = 0;
var bool = true;
var paused = false;
var end;
var now;
function pause(){
paused = true;
}
function stop(){
end = now;
bool = true;
}
function cd(){
if (bool) {
end = new Date();
end.setMinutes(end.getMinutes()+minutesleft);
end.setSeconds(end.getSeconds()+secondsleft);
end.setMilliseconds(end.getMilliseconds()+millisecondsleft);
bool = false;
}
now = new Date();
diff = end - now;
diff = new Date(diff);
var msec = diff.getMilliseconds();
var sec = diff.getSeconds();
var min = diff.getMinutes();
if (min < 10){
min = "0" + min;
}
if (sec < 10){
sec = "0" + sec;
}
if(msec < 10){
msec = "00" +msec;
}
else if(msec < 100){
msec = "0" +msec;
}
if(now >= end){
clearTimeout(timerID);
document.getElementById("cdtime").innerHTML = 'POLICE IS HERE';
}
else{
document.getElementById("cdtime").innerHTML = min + ":" + sec + ":" + msec;
}
if (paused == false){
timerID = setTimeout("cd()", 10);
}
else {
bool = true;
minutesleft = min;
secondsleft = sec;
millisecondsleft = msec;
}
paused = false;
}
Here's a fiddle : https://jsfiddle.net/cw3s5124/
Thanks in advance
The main issue with the jumping numbers was due to string concatenation and then using that string in the date functions. Parts of the code such as this:
if (min < 10){
min = "0" + min;
}
An example proving why this is happening
var end1 = new Date();
var minutesleft1 = 9;
console.log("Minutes to assign to current time");
console.log(end1.getMinutes() + minutesleft1); // Logs expected amount of minutes to calculate
end1.setMinutes(end1.getMinutes() + minutesleft1);
var end2 = new Date();
var minutesleft2 = "09";
console.log("Wrong Minutes to assign to current time");
console.log(end2.getMinutes() + minutesleft2); // Logs big number
end2.setMinutes(end2.getMinutes() + minutesleft2);
console.log(end1); // Logs expected result
console.log(end2); // Logs a time a day or so in the future
■
Explanation: If you were to set your start timer to 9 in the minutes var, it would immediately need to be padded with a 0 for display. Since you are now setting the minutesleft variable to "09" you are effectively doing 9 + "09" when you call end.setMinutes(end.getMinutes()+minutesleft);
Once you concatenate a string "0" to the number, you are effectively trying to do numeric operations with a string, which is causing unexpected results. This wasn't happening at the start, because your if statements weren't running yet and thus the min, sec, and msec vars were still numeric. You should only pad the numbers when displaying them, not in the calculations themselves.
I replaced the string concatenation with a padding function borrowed from this post.
I also added a play function to reset your pause parameter. This makes the code more readable and easier for me to understand. Also, change it to paused at the start because the timer isn't running yet.
var minutesleft = 10;
var secondsleft = 05; // This would normally just be returned as 5, that's why we need the pad function for display
var millisecondsleft = 0;
var firstCall = true;
var paused = true;
var end;
var now;
function pause() {
paused = true;
}
function play() {
if (paused === false) // Shorcut out because we are already running
return;
paused = false;
cd();
}
function stop() {
end = now;
paused = true;
cd();
}
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("cdtime").innerHTML = pad(minutesleft, 2) + ":" + pad(secondsleft, 2) + ":" + pad(millisecondsleft, 2);
});
function cd() {
if (firstCall) {
end = new Date();
end.setMinutes(end.getMinutes() + minutesleft);
end.setSeconds(end.getSeconds() + secondsleft);
end.setMilliseconds(end.getMilliseconds() + millisecondsleft);
firstCall = false;
}
now = new Date();
diff = end - now;
diff = new Date(diff);
var msec = diff.getMilliseconds();
var sec = diff.getSeconds();
var min = diff.getMinutes();
if (now >= end) {
clearTimeout(timerID);
document.getElementById("cdtime").innerHTML = 'POLICE IS HERE';
} else {
document.getElementById("cdtime").innerHTML = pad(min, 2) + ":" + pad(sec, 2) + ":" + pad(msec, 2);
}
if (paused === false) {
timerID = setTimeout("cd()", 10);
} else {
bool = true;
minutesleft = min;
secondsleft = sec;
millisecondsleft = msec;
}
}
function pad(n, width, z) {
z = z || '0';
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
<body>
<div id='timer'>
<button class='playerButtons' id='playT' type='submit' onclick='play()'>Play</button>
<button class='playerButtons' id='pauseT' type=' submit' onclick='pause()'>Pause</button>
<button class='playerButtons' id='stopT' type='submit' onclick='stop()'>Stop</button>
<div id='cdtime'></div>
</div>
</body>
You reset paused and bool in the wrong spot. If you look at the JsFiddle, you can see what needs to be removed
var minutesleft = 60;
var secondsleft = 0;
var millisecondsleft = 0;
var bool = true;
var paused = true;
var end;
var now;
function pause(){
paused = true;
//bool = false; //shouldn't be here (move to stop function)
}
function play(){
if ( paused === true){
paused = false;
bool = true;
cd();
}
}
function stop(){
end = now;
bool = false; //add here
}
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("cdtime").innerHTML = minutesleft + ":" + secondsleft + "0:" + millisecondsleft + "0";
});
function cd(){
if (bool) {
end = new Date();
end.setMinutes(end.getMinutes()+minutesleft);
end.setSeconds(end.getSeconds()+secondsleft);
end.setMilliseconds(end.getMilliseconds()+millisecondsleft);
bool = false;
}
now = new Date();
diff = end - now;
diff = new Date(diff);
var msec = diff.getMilliseconds();
var sec = diff.getSeconds();
var min = diff.getMinutes();
if (min < 10){
min = "0" + min;
}
if (sec < 10){
sec = "0" + sec;
}
if(msec < 10){
msec = "00" +msec;
}
else if(msec < 100){
msec = "0" +msec;
}
if(now >= end){
clearTimeout(timerID);
document.getElementById("cdtime").innerHTML = 'POLICE IS HERE';
}
else{
document.getElementById("cdtime").innerHTML = min + ":" + sec + ":" + msec;
}
if (paused === false){
timerID = setTimeout("cd()", 10);
}
else {
bool = true;
minutesleft = min;
secondsleft = sec;
millisecondsleft = msec;
}
//paused = false; //shouldn't be here
}
<body>
<div id='timer'>
<button class='playerButtons' id='playT' type='submit' onclick='play()'>Play</button>
<button class='playerButtons' id='pauseT' type=' submit'onclick='pause()'>Pause</button>
<button class='playerButtons' id='stopT' type='submit' onclick='stop()'>Stop</button>
<div id='cdtime'></div>
</div>
</body>
https://jsfiddle.net/cw3s5124/27/
I'm creating java script count down timer and it works up to 60 seconds correctly and after that its not working.
var counter = setInterval(timer, 1000); //1000 will run it every 1 second
function timer() {
var val = document.getElementById("LabelTimer");
if (val != null) {
var PopUpTimeDuration = 2;
countdown(parseInt(PopUpTimeDuration));
}
}
function countdown(minutes) {
var seconds = 60;
var mins = minutes
function tick() {
var counterVal = document.getElementById("lblCountDown");
var current_minutes = mins - 1
seconds--;
counterVal.innerHTML =
current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
var result = counterVal.innerHTML;
if (result == "0:00") {
clearInterval(counter);
CloseIdlePage();
}
if (seconds > 0) {
setTimeout(tick, 1000);
} else {
debugger;
if (mins >= 1) {
countdown(mins - 1);
}
}
}
tick();
}
When i run this program this start 1:59 and it continues up to 1:01. after that this display value rest to 1:59. (not 0:59). what i did wrong in here?
Fiddle demo is in Here: in here you can see two values are blinking each other
Here's how I'd implement this. Hopefully the comments are sufficient. It needs an element in the page with ID "counterDiv" to write the values to.
function quickCount(mins) {
// Keep some values in a closure
var el = document.getElementById('counterDiv');
var secs = 0;
// Helper to pad single digit numbers
function z(n){return (n<10? '0':'') + n}
// Keep a reference to the interval
var timer = setInterval(function() {
// Write the values
el.innerHTML = mins + ':' + z(secs);
// Decremement seconds
--secs;
// If finished a minute, decrement minut
if (secs < 0) {
if (mins) {
--mins;
secs = 59;
// If finsihed minutes too, cancel timer
} else {
timer && clearInterval(timer);
}
}
// Run at about every second
}, 1000);
}
window.onload = function() {
quickCount(2);
}
HTH
<head>
<script type="text/javascript">
function timer()
{
var val = document.getElementById("LabelTimer");
if (val !== null)
{
var PopUpTimeDuration = 2;
countdown(parseInt(PopUpTimeDuration));
}
}
function countdown(minutes)
{
var seconds = 60;
var mins = minutes;
function tick()
{
var counterVal = document.getElementById("lblCountDown");
var current_minutes = mins - 1;
seconds--;
var t=current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
counterVal.value = t;
var result = counterVal.innerHTML;
if (result === "0:00")
{
CloseIdlePage();
}
if (seconds > 0)
{
setTimeout(tick, 1000);
}
else
{
if (mins > 1)
{
countdown(mins - 1);
}
}
}
tick();
}
</script>
</head>
<body>
<div>TODO write content</div>
<input type="text" id="LabelTimer" value="yooo">
<input type="text" id="lblCountDown">
<input type="button" value="try" onclick="timer();" />
</body>
I resolved this as follows:
var counter = setInterval(timer, 1000); //1000 will run it every 1 second
var IsFunctionCalled = false;
function timer() {
var val = document.getElementById("LabelTimer");
if (val != null) {
var PopUpTimeDuration = 2;
if (IsFunctionCalled == false) {
IsFunctionCalled = true
countdown(parseInt(PopUpTimeDuration));
}
}
}
function countdown(minutes) {
var seconds = 60;
var mins = minutes
function tick() {
var counterVal = document.getElementById("lblCountDown");
var current_minutes = mins - 1
seconds--;
counterVal.innerHTML =
current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
var result = counterVal.innerHTML;
if (result == "0:00") {
clearInterval(counter);
CloseIdlePage();
}
if (seconds > 0) {
setTimeout(tick, 1000);
// tick()
} else {
if (mins >= 1) {
countdown(mins - 1);
}
}
}
tick();
}
See here for Demo