HTML code to create a Digital Clock

In this section we are going to create a digital clock using html langauge. We will also use JavaScript to make it work. CSS stylesheet are also used to create some style.You must have the basic knowledge of html language to understand the given program. You can learn HTML from our HTML Tutorial.

You must have the basic knowledge of html language to understand the given program. Please see our HTML Tutorial.

Click the Button to See Demo
digital_clock

HTML Program : create a digital clock

<html>
<head>
<style>
#clock{
height: 60px;
width: 500px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
font-family: courier, monospace;
text-align: center;
color: white;
font-size: 60px;
border: 1px solid black;
background-color: cyan;
}
</style>
</head>
<body>
<script>
function digitalclock()
{
var date = new Date()
var time = date.toLocaleTimeString()
document.getElementById("clock").innerHTML = time
}
setInterval(function(){digitalclock()},1000)
</script>
<div id="clock">
</div>
</body>
</html>


Click the Button to See Demo

Code Explanation

  • Ever wondered why do websites show static time? Shouldn't the clock keep ticking second after second? By following the above code placed in this tutorial you will be able to create a real time digital clock. First of all we create the date object which gives us the current date and time of your system.Here is the code for that:
  • var date = new Date()//This statement gives the current date and time of the your systems.
  • Next we have to extract the time portion of a Date object as a string. The following line of code is used for this purpose:
  • var time = date.toLocaleTimeString()
    //The toLocaleTimeString() method returns the time portion of a Date object as a string, using locale conventions.
  • Now we have to display the time on our webpage.To do this first we need to create a div container which will hold the time display. This container can be placed anywhere in your webpage wherever you want to place the digital clock.The following line of code is used for this purpose:
  • // The given statement will display the time on our webpage.
    <div id="clock">
    </div>
  • You can also apply the style to your digital clock which can be easily done by manipulating the CSS of the particular div mention in the above point. Here is the code of CSS style for the digital clock:
  • // The given lines of code will apply the style to the digital clock.
    #clock{
    height: 60px;
    width: 500px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    font-family: courier, monospace;
    text-align: center;
    color: white;
    font-size: 60px;
    border: 1px solid black;
    background-color: cyan;
    }
  • Once the div has been created, we can place the time into this div container through the innerHTML property of javascript. This property tell the javascript to place the digital clock into the html element, Here is the code for this purpose:
  • document.getElementById("clock").innerHTML = time//This statement will place the digital clock into the HTML element.
  • Now when we run our webpage, we should be able to see the digital clock showing the current time but It is not running. To make it run, we need to update the clock every second, for doing this we will use the setInterval() method.Here is the code for this purpose:
  • setInterval(function(){digitalclock()},1000)
    //This statement will make the digital clock dynamic or force it to update every second.
    That's it! 😄 😄