I've got a working countdown timer which starts at 30 minutes.
With only 3 minutes left (so after 27 minutes) I'd like the number 250 to decrease at random intervals from 3 minutes left down to the end of the countdown.
Any ideas?
https://codepen.io/anon/pen/bWoGrb
// Stopwatch
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 () {
var thirtyMinutes = 60 * 30,
display = document.querySelector('#stopwatch');
startTimer(thirtyMinutes, display);
};
<div id='stopwatch'></div>
Maybe use something like this (I hope I clearly understood the question):
Just using a if/else within the condition something to say: Go normal when more than 60*3, and when under 60*3 seconds rest, there is chance to do nothing
// Stopwatch
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
if(timer > 60*3 || Math.random() < 0.25) {
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;
}
} else {
/* do not reduce the timer to wait 1 interval more */
/* or maybe do like `timer -= Math.random()` if you want to reduce it faster */
}
}, 1000);
}
window.onload = function () {
var thirtyMinutes = 60 * /*30*/ 4, // just set to 4 to see faster
display = document.querySelector('#stopwatch');
startTimer(thirtyMinutes, display);
};
<div id='stopwatch'></div>
Related
I have a 5 minutes countdown. This function launch automatically when page load. I want to reload data of page and resetting this countdown. The code looks like this.
HTML
<a onClick="timer()" title="Pincha para actualizar" class="pull-right" id="time"></a>
JS
function timer(){
var timer = 60 * 5, 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;
$('#time').text("Tiempo restante para actualización de datos " + minutes + ":" + seconds);
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
The problem: When i click the link the timer goes crazy, doesn´t reset properly.
Anybody knows what´s the rigth way to reset countdown?
You are missing a clearInterval otherwise you are creating a new interval each time you click on the element.
let interval = null;
function timer(){
var timer = 60 * 5, minutes, seconds;
if (interval !== null) {
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;
$('#time').text("Tiempo restante para actualización de datos " + minutes + ":" + seconds);
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
you can use clearInterval inside setInterval itself
function timer(){
var timer = 60 * 5, minutes, seconds;
interval = setInterval(()=> {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
$('#time').text("Tiempo restante para actualización de datos " + minutes + ":" + seconds);
if (--timer < 0) {
timer = duration;
}
if (interval !== null) clearInterval(interval);
}, 1000);
}
I have this countdown and I want to animate the numbers like when they change, the number flip or some fancy transition.
<div>Registration closes in <span id="time">05:00</span> minutes!</div>
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 () {
var fiveMinutes = 60 * 5,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
I'd appreciate any help, thankyou
Change to jquery
<div>Registration closes in <span id="time">05:00</span> minutes!</div>
$(window).load(function(){
duration=60*5;
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').animate({'opacity': 0}, 400, function(){
$(this).html(minutes + ":" + seconds).animate({'opacity': 1}, 400);
});
if (--timer < 0) {
timer = duration;
}
}, 1000);
});
This a count down timer. I don't understand how var timer works. What is its set value after each interval? How does the timer produce the number of minutes and seconds? Could some one break down step-by-step how this bit of code operates?
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
Here is the complete code:
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 () {
var fiveMinutes = 60 * 5,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
minutes = parseInt(timer / 60, 10);
Minutes are number of current total seconds divided by 60 (seconds in a minute).
E.g.: 65 / 60 = 1 minute. We just keep the integer part.
seconds = parseInt(timer % 60, 10);
Seconds are calculated as the module 60 of the current total seconds counter.
E.g.: 65 % 60 = 5 (1 minute, 5 seconds)
[Notice that in the second line the parseInt is unnecessary.]
var timer = duration, seconds, minutes;
this can also be written as:
var timer = duration;
var seconds;
var minutes;
You can declare and instialise multiple variables at a time in javascript.
var a,
b,
c;
is same as
var a;
var b;
var c;
also you can intialize variable too so
var timer = duration, seconds, minutes;
is same as writing
var timer = duration;
var seconds;
var minutes;
(as #Lorenzo already mentioned)
var timer = duration, seconds, minutes declares 3 variables with only the first getting initialized. It is the same as writing:
var timer = duration;
var seconds;
var minutes;
I need to stop the timer if it reach to 0.I need to stop the countdown at 00.00 and display alert(countdown stopped).now It starts again.need to stop after reach to 00.00
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 () {
var fiveMinutes = 60 * .05,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
<body>
<div>Registration closes in <span id="time">start</span> minutes!</div>
</body>
Please use clearInterval as show in snippet.
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var __timer = 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(__timer);
timer = duration;
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * .05,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
<body>
<div>Registration closes in <span id="time">start</span> minutes!</div>
</body>
Orr you could wrap this line of code
if (--timer < 0) {
timer = duration;
}
with
if (display.textContent != "0:00") {
if (--timer < 0) {
timer = duration;
}
}
I have a start button for my countdown, but i want it to stop when i click the stop button.
my html code:
<div>
<span id="timer">25:00</span>
</div>
Start
Stop
my js code:
$('#startTimerButton').click(function starter() {
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.text(minutes + ":" + seconds);
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
jQuery(function ($) {
var fiveMinutes = 60 * 25,
display = $('#timer');
startTimer(fiveMinutes, display);
});
});
First, try to return your interval in the function:
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
timeInterval = 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.text(minutes + ":" + seconds);
if (--timer < 0) {
timer = duration;
}
}, 1000);
return timeInterval;
}
Then, calling this function assign it to a variable so you can clear it later with:
var countTimeInterval = startTimer();
clearInterval(countTimeInterval);
connect the function with a variable like this: (Try without the 'var')
var my_timer = setInterval(function () { ...
And stop the timer with this function:
$("#stop_btn").click(function(){
clearInterval(my_timer);
});
You need to use the function clearInterval to stop the timer.
$(document).ready(function() {
var handler;
$('#stopTimerButton').click(function () {
if (handler) {
clearInterval(handler);
}
});
$('#startTimerButton').click(function starter() {
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
handler = 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.text(minutes + ":" + seconds);
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
jQuery(function ($) {
var fiveMinutes = 60 * 25,
display = $('#timer');
startTimer(fiveMinutes, display);
});
});
});
You need to clear the interval when a button is pressed. Suppose the button to stop is #stopTimerButton. Then, change your js to:
$('#startTimerButton').click(function starter() {
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
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.text(minutes + ":" + seconds);
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
jQuery(function ($) {
var fiveMinutes = 60 * 25,
display = $('#timer');
startTimer(fiveMinutes, display);
});
});
$('#stopTimerButton').click(function() {
clearInterval(interval);
});