Digital Clock using JavaScript (Seconds ticking) - How Do I Create a Simple Digital Clock in JavaScript?

In this article, I am going to show you how to design a simple animated Digital Clock in JavaScript. Since, a browser executes a JavaScript program at the client side, the script will pick up the time of the client’ computer and display it.

Updated: I have now added a Digital Font to the Clock. You do not have to download the digital font on your machine. All you have to do is add the Google Font CDN inside the <head> section of your web page. The font I am using in the demo is Orbitron.

Note: JavaScript should be enabled on the browser for this script to function.

Related: Simple Analog Clock using HTML5 canvas and JavaScript

The CSS and Markup
<html>
<head>
    <title>Digital Clock using JavaScript</title>
    <link href="http://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet" type="text/css"/>

    <style>
        .tabBlock
        {
            background-color:#57574f;
            border:solid 0px #FFA54F;
            border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
            max-width:200px;
            width:100%;
            overflow:hidden;
            display:block;
        }
        .clock
        {
            vertical-align:middle;
            font-family:Orbitron;
            font-size:40px;
            font-weight:normal;
            color:#FFF;
            padding:0 10px;
        }
        .clocklg 
        {
            vertical-align:middle; 
            font-family:Orbitron;
            font-size:20px;
            font-weight:normal;
            color:#FFF;
        }
    </style>
</head>

<!-- ON LOAD OF THE PAGE, THE CLOCK WILL START TICKING. -->
<body onload="digitized();">
    <div style="background-color:#F3F3F3;
        max-width:220px;width:100%;margin:0 auto;padding:20px;">

        <table class="tabBlock" align="center" cellspacing="0" cellpadding="0" border="0">
            <tr><td class="clock" id="dc"></td>  <!-- THE DIGITAL CLOCK. -->
                <td>
                    <table cellpadding="0" cellspacing="0" border="0">
                    
                        <!-- HOUR IN 'AM' AND 'PM'. -->
                        <tr><td class="clocklg" id="dc_hour"></td></tr>

                        <!-- SHOWING SECONDS. -->
                        <tr><td class="clocklg" id="dc_second"></td></tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
</body>
The Script
<script>
    // OUR FUNCTION WHICH IS EXECUTED ON LOAD OF THE PAGE.
    function digitized() {
        var dt = new Date();    // DATE() CONSTRUCTOR FOR CURRENT SYSTEM DATE AND TIME.
        var hrs = dt.getHours();
        var min = dt.getMinutes();
        var sec = dt.getSeconds();

        min = Ticking(min);
        sec = Ticking(sec);

        document.getElementById('dc').innerHTML = hrs + ":" + min;
        document.getElementById('dc_second').innerHTML = sec;

        if (hrs > 12) { 
            document.getElementById('dc_hour').innerHTML = 'PM'; 
        }
        else { 
            document.getElementById('dc_hour').innerHTML = 'AM'; 
        }

        // CALL THE FUNCTION EVERY 1 SECOND (RECURSION).
        var time
        time = setInterval('digitized()', 1000);
    }

    function Ticking(ticVal) {
        if (ticVal < 10) {
            ticVal = "0" + ticVal;
        }
        return ticVal;
    }
</script>
</html>

How this script is executed?

Function digitized () is called immediately after the page is loaded. Therefore, we will call the function using body onload event.

There is another way to call the script.

Replace
<body onload="digitized();"></body>

With
<script type="text/javascript">
    window.onload = digitized();
</script>

Related: Simple Analog Clock using HTML5 canvas and JavaScript

Method setTimeout()

time = setTimeout('dTime()', 1000);

The above method will refresh the clock every 1000 miliseconds or 1 second, which will set the seconds ticking.

Finally, style it with CSS. That's it. Thanks for checking my Digital Clock here.

Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Facebook Google+
comments powered by Disqus

Join our Google Plus Community and be a part of a discussion!