Countdown in Javascript

Question

I would like to put on our company intranet page the number of days until the next payday, however - the payday dates aren't every 4 weeks etc. they will be similar to this:

1st January 2011
15th February 2011
12th March 2011
20th April 2011
...

Is it possible to have a javascript countdown clock that has the above dates listed, so once one date has passed it would then start counting down until the next calendar date?

I can find plenty of examples of scripts that countdown until a specific date but none that start counting down to the second date once the first has passed.

Thanks, Dan

@Ash - To be honest, I know nothing about Javascript. I was hoping for a link to a tutorial or something similar. — dannymcc
– dannymcc, Commented Feb 28, 2011 at 11:22

TurBas · Accepted Answer · 2011-02-28 11:47:05Z

2

Put the dates in an array. Be careful, in Javascript the months are zero-based so ranging from 0 to 11. Iterate the array and when the date is bigger then today display the days in between:

    var calcPayDate = function () {
        var payDates = [];
        payDates.push(new Date(2011, 0, 1));
        payDates.push(new Date(2011, 1, 15));
        payDates.push(new Date(2011, 2, 12));
        payDates.push(new Date(2011, 3, 20));

        var today = new Date();
        for (var i = 0; i < payDates.length; i++) {
            if (payDates[i] > today) {
                document.getElementById('countdownDiv').innerHTML = calcDays(payDates[i], today);
                break;
            }
        }
    }

    var calcDays = function(date1, date2) {

        // The number of milliseconds in one day
        var ONE_DAY = 1000 * 60 * 60 * 24

        // Convert both dates to milliseconds
        var date1_ms = date1.getTime()
        var date2_ms = date2.getTime()

        // Calculate the difference in milliseconds
        var difference_ms = Math.abs(date1_ms - date2_ms)

        // Convert back to days and return
        return Math.round(difference_ms / ONE_DAY)

    }

The calcDays function is an function found on this site

The days are put in a div which is called 'countdownDiv'.

answered Feb 28, 2011 at 11:47

TurBas

1,66613 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pimvdb Over a year ago

@dannymcc: You just have to call the actual function: jsfiddle.net/fWYrM/1

TurBas Over a year ago

Like @pimvdb said. Call the function in the onload of the body. Or use a framework like jQuery to bind it to the onload event.

Stewart · Accepted Answer · 2011-03-01 00:57:01Z

0

Search the web for "JavaScript tutorial".

Meanwhile, here's some code to get you started:

var dates = [
    new Date(2011, 0,  1),  // note that format is year, month-1, day
    new Date(2011, 1, 15),  // don't ask me why
    new Date(2011, 2, 12),
    new Date(2011, 3, 20)
];

var now = new Date();

for (var i in dates) {  // this is a foreach loop
    if (now < dates[i]) {
        document.write(Math.ceil((dates[i] - now) / 86400000));
        break;
    }
}

edited Mar 1, 2011 at 0:57

answered Feb 28, 2011 at 11:44

Stewart

4,0644 gold badges29 silver badges39 bronze badges

5 Comments

duri Over a year ago

In your code, variable i is not initialized and you use for-in loop to iterate through array. Both are considered harmful. You should edit your code.

Stewart Over a year ago

@duri "i is not initialised" - but it's given a value first time it's used! "you use for-in loop to iterate through array" - what's wrong with that?

duri Over a year ago

It doesn't matter whether it's given a value or not. Using var prevents the variable from leaking to the global scope. + see stackoverflow.com/questions/500504/…

Stewart Over a year ago

@duri You didn't say anything about using var. You talked about initialising the variable - which in my vocabulary, means giving it a starting value. But I agree that using var is a good idea - I had just forgotten it on this occasion. And I'll have to investigate the for..in debate more closely....

duri Over a year ago

To initialise a variable means to use var keyword. Sorry for the confusion.

Collectives™ on Stack Overflow

Countdown in Javascript

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related