Count down days, hours, minutes and seconds to a set date in JavaScript

Question: count down days, hours, minutes and seconds to a set date in JavaScript

JavaScript provides several built-in functions and objects for working with dates and times. Here are some of the most commonly used:

Date object: The Date object represents a specific date and time, and provides methods to get and set various date and time components, such as the year, month, day, hour, minute, second, and millisecond. You can create a new Date object using the new keyword and passing in one or more arguments to specify the date and time. For example:

let currentDate = new Date(); // creates a new Date object with the current date and time
let specificDate = new Date(2022, 5, 30, 12, 30, 0); // creates a new Date object for June 30, 2022 at 12:30 PM

getTime() method: The getTime() method of the Date object returns the number of milliseconds since January 1, 1970, which is also known as the Unix epoch. This is a common way to represent dates and times in programming, as it allows for easy comparisons and calculations.

let currentDate = new Date();
let timestamp = currentDate.getTime(); // returns the number of milliseconds since January 1, 1970 for the current date and time

These are just a few examples of how you can use date and time in JavaScript. There are many other built-in functions and libraries available that provide additional functionality.

For the given question, we will create a very simple project feature that you can integrate in your software development project. We will create a simple example of a time counter that counts down days, hours, minutes and seconds to a set date.

Let’s begin!

<script>
(function(){
    // Targeted date
    var countDownDate = new Date("Jun 2, 2025 23:59:59").getTime();
    // Update the count down every 1 second
    var x = setInterval(function() {
        // Get current date and time
        var now = new Date().getTime();
        // Time to the date
        var timeToDate = countDownDate - now;
        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(timeToDate / (1000 * 60 * 60 * 24));
        var hours = Math.floor((timeToDate % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((timeToDate % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((timeToDate % (1000 * 60)) / 1000);
        // Display the result in the element with id="counter"
        document.getElementById("counter").innerHTML = days + "<small>d</small> " + hours + "<small>h</small> " + minutes + "<small>m</small> " + seconds + "<small>s</small> ";
        // If the countdown is finished, display a message 
        if (timeToDate < 0) {
            clearInterval(x);
            document.getElementById("counter").innerHTML = "Countdown finished";
        }
    }, 1000);

})();
</script>

<div id="counter"></div>

Javascript date counter

This is how we count down days, hours, minutes and seconds to a set date in JavaScript

Start Learning Javascript

codeflare