Create a simple Digital Clock for Your website with Javascript.

Create a Unordered list in HTML

You have to create a unordered list using <ul> and</ul> tags in your HTML file. And inside it include 3 <li> elements for Hours, Minutes and Seconds .

ul >

<li id='hours'></li>

<li id = 'minutes'></li>

<li id ='seconds'></li>

</ul>

Write The Script With Javascript

Then you can place your script inside head tags.

<script>

function newfunc() {

a = new Date();

day ="AM"

hours = a.getHours();

if (hours > 12){

hours = hours -12;

day = 'PM'

}

else{

}

document.getElementById("hours").innerHTML = ("0"+hours).slice(-2)+':';

document.getElementById("minutes").innerHTML = ("0"+a.getMinutes()).slice(-2)+':';

document.getElementById("seconds").innerHTML = ("0"+a.getSeconds()).slice(-2)+"&nbsp;"+day;

}

setInterval(newfunc,1000);

Stylise the Unordered List

Add a <style> tag to stylise the <li> elements

<style>

li {

display: inline-block;

font-size: xx-large;

}

</style> 

and add a inline CSS to stylise the Unordered list

<ul style="float:right; ">

<li>Your Current Time &nbsp;</li>

<li id='hours'></li>

<li id = 'minutes'></li>

<li id ='seconds'></li>

</ul>

Then It Looks like this

You Can Simply clone my clock from github

https://github.com/ChamodhNethsara/Simple-Digital-Clock

Happy Coding...