How to Create a Beautiful Running Clock in JavaScript?

By | May 29, 2013
javascript clock tutorialJavaScript is full of fun, for web developers it is very interesting language, which has powerful functions to create or change HTML static pages to dynamic pages. For me, JavaScript is something really really amazing, and I love to code in JavaScript. I was recently creating some JavaScript video tutorials for my YouTube channel and while making video tutorials I also created a beautiful running online clock using JS. The video tutorials will be later on published on this blog. But for now I can give you an Idea for creating simple beautiful clock in JS. And guys, it is very easy to create. So without wasting time, I’m taking you straight to the tutorial.

Creating a clock in JavaScript

The first thing for creating a clock in JavaScript is to start NodePade or NotePade++ and start writing the basic HTML structure. After inserting the basic HTML structure you can save the file with any name you like such as clock.html, myclock.html or something like that. Now here is the JavaScript code for clock, so you can directly add this code to your HTML document and the clock will be running right now.

<script>
function clock(){
time = new Date();
hours = time.getHours();
mins = time.getMinutes();
sec = time.getSeconds();
if(mins<10){
mins = “0”+mins;
}
if(sec<10){
sec = “0”+sec;
}
if(hours>13){
hours =hours-12;
}
if(hours>12){
ampm=”AM”;
}
else{
ampm = “PM”;
}
document.getElementById(“myclock“).innerHTML=hours+”:”+mins+”:”+sec+” “+ampm;
timer = setTimeout(function(){clock()},500);
}
</script>

There are two things you’ll do after adding my JS clock script to your HTML document, the first thing will be to add an onload attribute in the <body> tag and add the function “clock” as the value like this <body onload=”clock()”> and after that you’ll need to insert a div tag inside the <body></body> section with an id=”myclock” like this: <div id=”myclock”></div>. So the div element will be empty at starting and when the script is loaded, it will change the HTML div element to dynamic clock created in JS. And for that we used innerHTML method in JavaScript.In this tutorial we just used the Date() function in JavaScript which is actually an Array and has multiple values, so we then retreived Hours, minutes & seconds from the Date() function. And the if() statement is just adding 0 to minutes when they are less than 10 and also to seconds when they are less than 10. And the ampm variable is changing the PM and AM according to the time.

The last thing is the timer which is very important in order to create a running online clock in JavaScript and we just used the setTimeout method here, and give it a value of 500 Milliseconds which will start the seconds to appear and disappear when the HTML document is loaded.

Now here is the all the JavaScript & HTML code for this Clock:

<html>
<head>
<title>JavaScript Training</title> <style>
div{
background:orange;
width:100px;
text-align:center;
border:4px groove green;
border-radius:20px;
margin:10%;
}
</style> <script>
function clock(){
time = new Date();
hours = time.getHours();
mins = time.getMinutes();
sec = time.getSeconds();
if(mins<10){
mins = “0”+mins
}
if(sec<10){
sec = “0”+sec;
}
if(hours>13){
hours =hours-12;
}
if(hours>12){
ampm=”AM”;
}
else{
ampm = “PM”;
}
document.getElementById(“myclock”).innerHTML=hours+”:”+mins+”:”+sec+” “+ampm;
timer = setTimeout(function(){clock()},500);
}
</script>
</head>
<body onload=”clock()”>
<div id=”myclock”></div>
</body>
</html>

We now have used a little bit CSS for making the clock looking beautiful in the browser, so you just need to copy all the above code and save it with any name you like, .html extension must be given. View it in the browser and you’ll see a beautiful running clock like this image:

I hope you’ll like this simple clock, I’ll soon publish all video tutorials regarding JavaScript on this blog. Stay Tuned and Take Care.

One thought on “How to Create a Beautiful Running Clock in JavaScript?

Speak Your Mind