Create a simple JavaScript Digital Clock

In this post, we will create a very simple JavaScript Digital Clock. This clock is very simple to make and can be integrated easily into any of your projects. We will first start by designing the UI of the clock and applying some CSS effects to it and then using default date object of javascript to get the current time.

javascript digital clock

JavaScript Digital Clock – HTML/CSS


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Digital Clock</title>

<!-- Custom styles-->
<style type="text/css">

body {
background-color: lightblue;
}

@font-face{
font-family:'digital-clock-font';
src: url('digital-7.ttf');
}

#clock {
width: 750px;
height: 200px;
background: black;
color: #33ff00;
font-size: 100px;
text-align: center;
margin: 0 auto;
padding-top: 80px;
margin-top: 150px;
font-family:'digital-clock-font';

}

</style>

<script>

</script>
</head>

<body onload="displayClock();">

<div id="clock"></div>

</body>
</html>

In this, we are using a custom font to style the clock digits to give it a real look. All the CSS codes are self-explanatory and very easy to understand. You can style it as whatever you want.

JavaScript Clock – JS CODE


function displayClock(){
 setInterval(updateClock, 1000);
 }
 
 function updateClock(){
 var dateTime = new Date();
 var output = "";
 var ampm = "AM";
 var hours = dateTime.getHours();
 
 if (hours > 12){
 hours -= 12;
 ampm = "PM";
 }
 if (hours < 10){
 hours = "0" + hours;
 }
 var minutes = dateTime.getMinutes();
 if (minutes < 10){
 minutes = "0" + minutes;
 }
 var seconds = dateTime.getSeconds();
 if (seconds < 10){
 seconds = "0" + seconds;
 }
 document.getElementById("clock").innerHTML = hours + ":" + minutes + ":" + seconds + " " + ampm;
 }

In this we are creating a new date object and then using it we are getting our current time. We are using setInterval function to run our clock and update every second. Us if condition we are checkig if the time is AM or PM and then appending it to the outputted time value.

JavaScript Clock – Complete Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Digital Clock</title>

<!-- Custom styles-->
<style type="text/css">

body {
background-color: lightblue;
}

@font-face{
font-family:'digital-clock-font';
src: url('digital-7.ttf');
}

#clock {
width: 750px;
height: 200px;
background: black;
color: #33ff00;
font-size: 100px;
text-align: center;
margin: 0 auto;
padding-top: 80px;
margin-top: 150px;
font-family:'digital-clock-font';

}

</style>

<script>

function displayClock(){
setInterval(updateClock, 1000);
}

function updateClock(){
var dateTime = new Date();
var output = "";
var ampm = "AM";
var hours = dateTime.getHours();

if (hours > 12){
hours -= 12;
ampm = "PM";
}
if (hours < 10){
hours = "0" + hours;
}
var minutes = dateTime.getMinutes();
if (minutes < 10){
minutes = "0" + minutes;
}
var seconds = dateTime.getSeconds();
if (seconds < 10){
seconds = "0" + seconds;
}
document.getElementById("clock").innerHTML = hours + ":" + minutes + ":" + seconds + " " + ampm;
}

</script>
</head>

<body onload="displayClock();">

<div id="clock"></div>

</body>
</html>

This is the complete code for digital clock using javascript, Download it and use this in your own projects.

Download the complete code fromĀ here.

Leave a Reply