What I'd like to accomplish is a countdown that updates live... like this:
6 Days (just the days)
12 Hours (just hours within 1 day)
59 Minutes (just minutes within 1 hour)
59 Seconds (just seconds within 1 minute)
Best way to accomplish this?
1
-
It's not so much a matter of what I've tried... I just wanted to see if there was a script floating around that would accomplish this.dcolumbus– dcolumbus2010-11-10 23:32:23 +00:00Commented Nov 10, 2010 at 23:32
Add a comment
|
6 Answers
You can find a working example at http://jsfiddle.net/gaby/QH6X8/79/
var end = new Date('15 Dec 2010');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour *24
var timer;
function showRemaining()
{
var now = new Date();
var distance = end - now;
if (distance < 0 ) {
// handle expiry here..
clearInterval( timer ); // stop the timer from continuing ..
alert('Expired'); // alert a message that the timer has expired..
}
var days = Math.floor(distance / _day);
var hours = Math.floor( (distance % _day ) / _hour );
var minutes = Math.floor( (distance % _hour) / _minute );
var seconds = Math.floor( (distance % _minute) / _second );
var countdownElement = document.getElementById('countdown');
countdownElement.innerHTML = 'Days: ' + days + '<br />';
countdownElement.innerHTML += 'Hours: ' + hours+ '<br />';
countdownElement.innerHTML += 'Minutes: ' + minutes+ '<br />';
countdownElement.innerHTML += 'Seconds: ' + seconds+ '<br />';
}
timer = setInterval(showRemaining, 1000);
answered Nov 10, 2010 at 23:44
Gabriele Petrioli
197k35 gold badges275 silver badges331 bronze badges
3 Comments
sarsar
@Gaby aka G. Petrioli if you want to display a message after the time expires how do you do that?
Gabriele Petrioli
@sarsar, in the
showRemaining method, check if the distance is negative. if it is then it has expired...sarsar
@Gaby aka G. Petrioli this code is exactly what i needed :D i dont know how long a searched for something so simple and easy to use. if i could bother you with one more thing. what would it take to add cookies so that if a user were to refresh it wouldnt start the timer all over again?
2 Comments
dcolumbus
I'd like to avoid using a plugin if I can. a bit too heavy for what I need.
dcolumbus
However, is there way to use this plugin in the mannor I'm asking? Only showing "days" when there's more than an entire day left, only showing "hours" when there's less than a day left, etc?
here you can generate countdown timer if you like - just press generate and copy paste the results into .html file
http://www.ricocheting.com/code/javascript/html-generator/countdown-timer
Comments
Notable mention: http://www.littlewebthings.com/projects/countdown/ (probable irrelevant since you mentioned that you don't want to use a plugin)
Comments
The problem with the above accepted approach is that there will be issues here related to timezone differences and daylight saving time. See this question asked by me Javascript Countdown and Timezone and Daylight Saving Time Issues
