CODEWITHSUNDEEP
javascriptjquerycountdown
Francesca
Francesca

Reputation: 28168

Countdown JavaScript for multiple "clocks"

I need to create multiple countdown clocks on one page. At the moment I have just one, but I'd like to make the script nice and compact so I'd like to use the same calculations for the dates but simply pull through a different value.

One clock counts down to the start of the Commonwealth games. I need another which counts down to the closing ceremony.

Script:

// set the date we're counting down to
var target_date_opening = new Date("Jul 23, 2014").getTime();
var target_date_closing = new Date("Aug 23, 2014").getTime();

// variables for time units
var days, hours, minutes, seconds;

// get tag element
var countdownOpening = document.getElementById("countdownOpening");
var countdownClosing = document.getElementById("countdownClosing");

// update the tag with id "countdownOpening" every 1 second
setInterval(function () {
    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date_opening - current_date) / 1000;

    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;

    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;

    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);

    // format countdown string + set tag value
    countdownOpening.innerHTML = days + " days " + hours + " hours "
    + minutes + " minutes " + seconds + " seconds";  

}, 1000);

You can see I've created new variables to differentiate the target dates (target_date_closing)

I have the ID for the innerHTML as countdownClosing.

My issue is making the setInterval function compute for target_date_closing and output this is countdownClosing without replicating the script a second time.

I'm not sure if individual variables are required for storing minutes, days, hours & seconds variables.

Upvotes: 1

Views: 605

Answers (2)

Tobi
Tobi

Reputation: 31479

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script language="JavaScript">
        // set the date we're counting down to
        var target_date_opening = new Date("2014-07-23").getTime();
        var target_date_closing = new Date("Aug 23, 2014").getTime();

        // variables for time units
        var days, hours, minutes, seconds;

        var showCountdown = function(elementID, dt) {

            var elem = document.getElementById(elementID);

            // update the tag with id "countdownOpening" every 1 second
            setInterval(function () {
                // find the amount of "seconds" between now and target
                var current_date = new Date().getTime();
                var seconds_left = (dt - current_date) / 1000;

                // do some time calculations
                days = parseInt(seconds_left / 86400);
                seconds_left = seconds_left % 86400;

                hours = parseInt(seconds_left / 3600);
                seconds_left = seconds_left % 3600;

                minutes = parseInt(seconds_left / 60);
                seconds = parseInt(seconds_left % 60);

                // format countdown string + set tag value
                elem.innerHTML = days + " days " + hours + " hours "
                        + minutes + " minutes " + seconds + " seconds";

            }, 1000);

        };
    </script>

</head>
<body>
<div id="countdownOpening"></div>
<div id="countdownClosing"></div>
     <script>
        showCountdown('countdownOpening', target_date_opening);
        showCountdown('countdownClosing', countdownClosing);

    </script>
</body>
</html>

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388416

Try

// set the date we're counting down to
var target_date_opening = new Date("Jul 23, 2014").getTime();
var target_date_closing = new Date("Aug 23, 2014").getTime();

// variables for time units
var days, hours, minutes, seconds;

// get tag element
var countdownOpening = document.getElementById("countdownOpening");
var countdownClosing = document.getElementById("countdownClosing");

// update the tag with id "countdownOpening" every 1 second
setInterval(function () {
    print(countdownOpening, target_date_opening)
    print(countdownClosing, target_date_closing)
}, 1000);

function print(el, time) {
    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (time - current_date) / 1000;

    // do some time calculations
    var days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;

    var hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;

    var minutes = parseInt(seconds_left / 60);
    var seconds = parseInt(seconds_left % 60);

    // format countdown string + set tag value
    el.innerHTML = days + " days " + hours + " hours " + minutes + " minutes " + seconds + " seconds";
}

Demo: Fiddle

Upvotes: 1

Related Questions