JavaScript Countdown Timer Example


In this tutorial, we will create a simple countdown timer using JavaScript. JS is rich in features so it’s not a tough job.

Steps

Step 1: Set the countdown date and time.

Step 2: Get the current date and time.

Step 3: Get the difference between the countdown and the current date.

Step 4: Update it on every second.

Step 5: Do something when competed.

JavaScript

To make it more clear, I have separated all the file. JS will do all the work for the countdown.

countdown.js
// Set the countdown date and time(24 hour format)
var countDownDateTime = new Date("Oct 22, 2050 00:00:00").getTime();
// update every second
var myInterval = setInterval(function () {
    // get the current date and time
    var currentDateTime = new Date().getTime();
    // Calculate the diffrence between countdown and current date
    var diff = countDownDateTime - currentDateTime;
    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(diff / (1000 * 60 * 60 * 24));
    var hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((diff % (1000 * 60)) / 1000);
    // Show on HTML
    document.getElementById("days").innerHTML = days;
    document.getElementById("hours").innerHTML = hours;
    document.getElementById("minutes").innerHTML = minutes;
    document.getElementById("seconds").innerHTML = seconds;
    // Do something when it completed.
    if (diff < 0) {
        clearInterval(myInterval);
        document.getElementById("countDownBlock").style.display = "none";
        document.getElementById("completed").style.display = "block";
    }
}, 1000);

CSS

Make the countdown block beautiful by adding some CSS rule.

countdown.css
h1{color: #396;font-weight: 100;font-size: 40px;margin: 40px 0px 20px;}
#clockdiv{font-family: sans-serif;color: #fff;display: inline-block;font-weight: 100;text-align: center;font-size: 30px;}
#clockdiv > div{padding: 10px;border-radius: 3px;background: #5fba7d;display: inline-block;}
#clockdiv div > span{padding: 15px;border-radius: 3px;background: #1c1d1d;display: inline-block;}
.smalltext{padding-top: 5px;font-size: 16px;}
#countDownBlock{text-align: center; margin-top: 50px;}

HTML

Display it to the users.

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Countdown Timer Example</title>
        <link rel="stylesheet" href="css/countdown.css" type="text/css"/>
        <script type="text/javascript" src="js/countdown.js"></script>
    </head>
    <body>
        <div id="countDownBlock">
            <h1>JavaScript Countdown Timer Example</h1>           
            <div id="clockdiv">
                <div>
                    <span id="days"></span>
                    <div class="smalltext">Days</div>
                </div>
                <div>
                    <span id="hours"></span>
                    <div class="smalltext">Hours</div>
                </div>
                <div>
                    <span id="minutes"></span>
                    <div class="smalltext">Minutes</div>
                </div>
                <div>
                    <span id="seconds"></span>
                    <div class="smalltext">Seconds</div>
                </div>
            </div>
        </div>
        <div id="completed" style="display: none; text-align: center;">
            <h1>Congratulations  for completing 34 years. </h1>
        </div>
    </body>
</html>

Similar Posts

About the Author

Websparrow
I like sharing my experiments and ideas with everyone by writing articles on the latest technological trends.