Design a simple Digital Clock with Date using JavaScript

I am sharing a simple JavaScript code here, which you can use to design a Digital Clock, with date, month and year. In-addition there is a little bit of CSS in the example to style the clock.

image

See this demo

The Markup and Style

To design the clock, I have few &ltdiv> elements on my web page, to show time like hours, minutes and seconds. It will also show AM or PM depending upon the time. The final &ltdiv> element will show the Day of the week, followed by the moth, date and the current year.

I am using a special font here called “Orbitron” for the clock. Inside the &lthead> tag, I have added the font’s CDN.

&lt!DOCTYPE html>
&lthtml>
&lthead>
    &lttitle>Digital Clock with Date using JavaScript&lt/title>
    &ltlink href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet" type="text/css"/>

    &ltstyle> 
    	* { 
            
font-family: Orbitron;
            font-size: 50px;
            font-weight: normal;
            float: left; 
            color: #555;
        }
        .clock {
            width: 290px;
            padding-right: 5px;
            overflow: hidden;
            letter-spacing: 2px;
        }
        .dH {
            clear: both;
            padding: 0 13px;
            font-size: 40%;
            float: none;
            text-align: center;
        }
    &lt/style>
&lt/head>

&ltbody>
    &ltdiv style='border: solid 1px #ddd; padding: 30px 20px; '>
        &ltdiv 
class='clock'
 id='dc'>&lt/div>       
        &ltdiv id='dcHour' style='color: #000; font-weight: bold;'>&lt/div>
        &ltdiv 
class='dH'
 id='day_year'>&lt/div>    
    &lt/div>
&lt/body>

Even though we have designed the clock, its not functional yet. You will see a blank page when you run it on a browser. To make it functional, we’ll need a script, a JS script. Your browser must have JavaScript enabled. Or else, the script won’t execute.

The JS Script

&ltscript>
    
setInterval
(function() {
        let dt = new 
Date
();
        let hrs = dt.
getHours
();
        let min = dt.
getMinutes
();
        let sec = dt.
getSeconds
();
        
        min = 
startTicking
(min);
        sec = 
startTicking
(sec);

         
        document.
getElementById
('dc').innerHTML = hrs + ':' + min + ':' + sec;
        document.
getElementById
('day_year').innerHTML = dt.toDateString();
        
        if (hrs >= 12) { 
            document.getElementById('dcHour').innerHTML = 'PM'; 
        }
        else { 
            document.getElementById('dcHour').innerHTML = 'AM'; 
        }
    });
    
    let startTicking = (val) => {
        if (val < 10) {
            val = '0' + val;
        }
        return val;
    }
&lt/script>
&lt/html>

Try it

I have two functions.
The first is the . Its an “in-built” JavaScript method, which usually calls a function or evaluates a piece of code, after a specified delay.

Here’s the syntax.

setInterval (function(), [delay])

The method takes two parameters. The first parameter is a function (or an expression). The second parameter is a time delay (in milliseconds) after which it calls the function.

So, the method in my script (above), has piece of code (for the clock) and I have not mention any delay, to start the clock immediately when the page loads.

There are few more in-built methods, like Date(), getHours() etc., which provides us with necessary data from the clock.

To get the month, year, date and day of week, I using a method called .toDateString(). This is an in-built function.

document.getElementById(‘day_year’).innerHTML = dt.toDateString();

Note: If you want to convert Days and Months to String, .

The second function starTicking() will check if the minutes and seconds are less than 10 or a single digit number. It simply adds a 0 (zero) before the single digit number.

Remember, since this script runs on a browser, the clock shows the time taken from the user’s computer (its not the server time).

Thanks for reading ☺.

← PreviousNext →