If you may want to include a live running clock on your website or webpage but are not sure how to do it. In this tutorial, I am going to explain how to create and add a running clock to your website or webpage. Below we have cover both the 24-hour and 12-hour format running clocks. By the end of this tutorial, you will have a clear understanding of how to add 24-hour and 12-hour format of clock into your web pages.
24-hours format
<html>
<body>
<div id="runningClock"></div>
<script>
setInterval(()=>{
var cDate=new Date();
var rClock=document.getElementById(' runningClock ')
rClock.innerHTML=
cDate.getHours()+":"+
cDate.getMinutes()+":"+
cDate.getSeconds();
},1000);
</script>
</body>
</html>12-Hours Format
<html>
<head>
<title></title>
</head>
<body>
<div id="runningClock"></div>
<script>
function updateRunningClock() {
var cDate = new Date();
var hours = cDate.getHours();
var minutes = cDate.getMinutes();
var seconds = cDate.getSeconds();
var meridiem = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
var tString = hours + ':' + minutes + ':' + seconds + ' ' + meridiem;
document.getElementById('runningClock').textContent = tString;
}
setInterval(updateRunningClock, 1000);
updateRunningClock();
</script>
</body>
</html>I hope this tutorial will help you to create and add a running clock into your webpages using JavaScript and HTML. If you have queries, suggestions or feedback feel free to contact us using the information provided on our contact us page.
Thank you
