Creating a Digital Clock using Pure Javascript

In this post we are going to create digital clock using pure Java script and HTML5. We have use Java script’s window.load (will started on page load) and setInterval (will update after every 1 second) function.

Digital Clock using Pure Java script full Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Digital Clock</title>
<style>
#clockArea{
padding :10px 20px 10px 20px;
background:#ffb400;
width:140px;
border:2px solid #333;
}
#hr{
font-size:34px;
font-weight: bold;
}
#min{
font-size:30px;
font-weight: bold;
}
#secs{
font-size:22px;
font-weight: italic;
}
</style>
</head>
<body>
<div id="clockArea">
<span id="hr"></span> <span id="min"></span> <span id="secs"></span>
</div>
<script>
function displayWatch(){
var d = new Date();
document.getElementById("hr").innerHTML=d.getHours()+" : ";
document.getElementById("min").innerHTML=d.getMinutes()+" : ";
document.getElementById("secs").innerHTML=d.getSeconds();
}
window.load = displayWatch();
setInterval(function(){
displayWatch();
},1000);
</script>
</body>
</html>