Like Us Like Us Facebook Subscribe Subscribe us YouTube Whatsapp Share us Whatsapp Query Send your queries

Creating a Digital Clock using Pure Javascript

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>

Digital Clock using Pure Java script Demo

Leave a Reply

Your e-mail address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Do you have any Query / Suggestion