JavaScript / jQuery Countdown

问题

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:

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);

回答2:

jQuery Countdown plugin

回答3:

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

回答4:

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

回答5:

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

回答6:

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

来源：https://stackoverflow.com/questions/4150113/javascript-jquery-countdown

标签

javascript

countdown