How can I create a countdown?

[IChaps]

Hello.

Could I please enquire.

How can I create a countdown then replicate it 6 times?

What I'm trying to do is build and auction page, which has 6 items, and 6 different ending times.

I've done it for 1 item (well I've copied the javascript from W3Scools site, then made up a date to test it).

But, I'm unsure how to repeat the same process, another 5 dates and times.

Could anyone please advise me?

The copied countdown code, I've got is:-

<!-- Countdown -->
        <p id="demo"></p>

        <script>
            // Set the date we're counting down to
            var countDownDate = new Date("Feb 18, 2026 23:25:25").getTime();

            // Update the count down every 1 second
            var x = setInterval(function() {

                // Get today's date and time
                var now = new Date().getTime();

                // Find the distance between now and the count down date
                var distance = countDownDate - now;

                // Time calculations for days, hours, minutes and seconds
                var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((distance % (1000 * 60)) / 1000);

                // Display the result in the element with id="demo"
                document.getElementById("demo").innerHTML = days + "d " + hours + "h "
                + minutes + "m " + seconds + "s ";

                // If the count down is finished, write some text
                if (distance < 0) {
                    clearInterval(x);
                    document.getElementById("demo").innerHTML = "EXPIRED";
                }
            }, 1000);
        </script>

 

Thank You.

[mac_gyver]

the simplest way would be to make the functional part of the count down code, into a function -

<script>
// produce count down given a date and the id of the display element
function cd(date,display_id)
{
    // Update the count down every 1 second
    var x = setInterval(function() {

        // Get today's date and time
        var now = new Date().getTime();

        // Find the distance between now and the count down date
        var distance = date - now;

        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        // Display the result in the element with id="demo"
        document.getElementById(display_id).innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

        // If the count down is finished, write some text
        if (distance < 0) {
            clearInterval(x);
            document.getElementById(display_id).innerHTML = "EXPIRED";
        }
    }, 1000);
}
</script>

you can then dynamically create the desired number of display elements, a corresponding array of count down dates, and call the function for each count down to display -

<p id="item_1"></p>
<p id="item_2"></p>
<p id="item_3"></p>

<script>
// Set the dates we're counting down to
var countDownDate = [];
countDownDate[1] = new Date("Feb 18, 2026 23:25:25").getTime();
countDownDate[2] = new Date("Feb 17, 2026 13:25:25").getTime();
countDownDate[3] = new Date("Feb 16, 2026 8:25:25").getTime();

cd(countDownDate[1],'item_1');
cd(countDownDate[2],'item_2');
cd(countDownDate[3],'item_3');
</script>

 

[dalecosp]

Man!  PHP is sure looking a lot like JavaScript these days... :D

[Barand]

@dalecosp - I have now moved this thread to the JS forum

[dalecosp]

Well, I was just teasing, but that is an appropriate operation. Hope things are well with you!

[gizmola]

Javascript runs on the client. So if this is really for some sort of auction site, you need to consider how the server figures into this, because client code and data can not be trusted.  I don't know what these clocks indicate, or how the user will interact with them, but you need to understand that, even if your code starts a countdown, the expiration of that countdown is not reliable and can not be used, to allow/disallow a bid for example.  Any auction timers must rely on the server for validation.  

Also I don't know where you got that code, but you should go back to the drawing board, even though mac_guyver did show you how you could make that work.    

The first sign that code is bad is the use of the var keyword, which means all your variables are global.  ES6 was released in 2015, so the recommended use of things like block scoping of variables using const and local, as well as string templates, arrow functions, promises and destructuring are all features of modern javascript for over 11 years now.   Another option that would make sense, would be the use of a Class.

You likely would want the timers to utilize Promises, which is another feature that was introduced in ES6.

Another technique that will often be applied to a problem like this is the use of an Immediately Invoked Function Expressions (IIFE).  An IIFE is a popular javascript technique for data hiding/making internal data private.