Create a Simple Javascript Clock
When you think “time” for a website, you automatically think “flash powered visual phenomenon,” at least i do. If you take a primary example, on the BBC website, in the header on the right, a flash powered clock. What if you have no flash player installed (i know, that’s a rareity nowadays) but, it can happen, you would be left with a big ugly, “install the latest flash player” button. To avoid this, for a client, i inserted a Javascript clock into his website, now you might say: “what if they have JS disabled?” Well, it’s more likely that they won’t go through the trouble of manually disabling Javascript in modern day browsers.
Ok, before anything, this isn’t styled, so you can just let rip with CSS as you wish 
First, we have to add the Javascript:
<script type=â€text/javascriptâ€>
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById(‘txt’).innerHTML=h+â€:â€+m+â€:â€+s;
t=setTimeout(’startTime()’,500);
}
function checkTime(i)
{
if (i<10)
{
i=â€0″ + i;
}
return i;
}
</script>
With JS we’re creating the div of “txt” to show the time. Now all we have to is add the HTML:
<body onload=â€startTime()â€>
<div id=â€txtâ€></div>
We’ve specified the txt div, and the time should now show.
It’s a simple, quick and effective way of showing the time, have fun 
Check the demo for the end product.
We offer testking 646-671 web design video tutorial for Beginners. Learn modern web designing using testking 642-691 guide and testking 642-262 live demos.
28 Responses to “Create a Simple Javascript Clock”
Leave a Reply
Nice script. I changed it a bit to the following.
function checkTime(i) {
return ( i < 10 ) ? '0' + i : i;
}
function updateTime( id ) {
var today = new Date(),
h = today.getHours(),
m = checkTime(today.getMinutes()),
s = checkTime(today.getSeconds());
window.document.getElementById( id ).innerHTML = h + ":" + m + ":" + s;
}
function startTime( id ){
t = window.setInterval( function(){ updateTime( id ); }, 500);
}
Great work, nice and short just as I like it
I really enjoyed this posting! If you are interested in any web design feel free to contact me at http://www.helixfire.com
Did you create your own blog or did a program do it? Could you please respond? 73
Created it myself =]
very cool & good post, thank you very much for sharing. But
Not Found
The requested URL /demos/jsclock.html was not found on this server.
Can you share this js code on my JavaScript library?
Awaiting your response. Thank
This is very neat and detailed. Expect more from you!
@JavaScriptBank.com:
I’ll get that back up as soon as possible
wow…. amazing information…
awesome thanks!.
@javascriptbank, yes you can
You made some good points there. I did a search on the topic and found most people will agree with your blog. Can I subscribe to your site?
Yep sure. The RSS feed button is in the sidebar. Cheers, Ben
Hi, I’ve been a lurker around your blog for a few months. I love this article and your entire site! Looking forward to reading more!
I just found this website a while ago when a good friend suggested it to me. I’ve been a regular reader ever since.
I came recently to your blog and have been reading along. I thought I would leave my initial comment. Keep posting, cause your posts are wonderful! Doesn’t it take up a lot of time to keep your website so fascinating ?
RSS feed is not working in chrome, Kindly fix it.
thanks !! very helpful post!
Hi, I can’t understand how to add your site in my rss reader. Can you Help me, please
Just click on the RSS button in the sidebar. Its easy from there =] Cheers, Ben
THanks very muck!
Thank you for a great post
Great tips I will be trying that tonight
thanks
Roger
Thanks for posting the info I might try that on my website this weekend.
Regards
Geoff
Really great pictures on this page.
Nice post, was wondering if you would allow me to link to it in a blog post i am currently writing for my own website? Cheers Jam
Sure, go ahead
Great tutorial! Nice and short. But the link to your demo does not work? :s