Digital Clock using JavaScript

javascript

Next →

Tools you can use

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 time from the client's computer and display it.

Real time clock... 👇

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

👉 Do you know you can design a simple Analog clock using Canvas and JavaScript? Check out this article.
Analog clock using Canvas and JavaScript

The Markup and CSS
<html>
<head>
    <title>Digital Clock using JavaScript</title>
    <link href="https://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 page load, the cloak 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 JS Script

<script>
    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'; 
        }
    }

    setInterval('digitized()', 1000);

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

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 reading.

Next →