4

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?

dcolumbus
  • 9,596
  • 26
  • 100
  • 165
  • 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 Nov 10 '10 at 23:32

6 Answers6

13

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);
Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • @Gaby aka G. Petrioli if you want to display a message after the time expires how do you do that? – sarsar Jul 16 '11 at 02:36
  • @sarsar, in the `showRemaining` method, check if the distance is negative. if it is then it has expired... – Gabriele Petrioli Jul 16 '11 at 10:24
  • @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? – sarsar Jul 16 '11 at 21:26
3

jQuery Countdown plugin

casablanca
  • 69,683
  • 7
  • 133
  • 150
  • I'd like to avoid using a plugin if I can. a bit too heavy for what I need. – dcolumbus Nov 10 '10 at 23:35
  • 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? – dcolumbus Nov 10 '10 at 23:41
0

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

Community
  • 1
  • 1
Sachin Kainth
  • 45,256
  • 81
  • 201
  • 304
0

jCounter offers control on what format you want your countdown to display among other control settings and methods.

SirCommy
  • 260
  • 3
  • 3
0

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

Florian Dardenua
  • 15
  • 1
  • 7
0

Notable mention: http://www.littlewebthings.com/projects/countdown/ (probable irrelevant since you mentioned that you don't want to use a plugin)

vassilis
  • 1,385
  • 1
  • 10
  • 20