Clocks for Websites
This article will talk about clock design and development for your websites, web applications, portals and so on. I am showing a set of simple JavaScript code in HTML structure through which you can develop a clock for yourself too.
You can also copy the code to your web based application or website to use its functionality, here we go.
Clock 1 |Code
This is the code of a simple clock structure that will show the default Desktop time, along with the date too. This clock will work dynamically using JavaScript.
- It is based on JavaScript.
- Works on mouse over events.
<div style="margin: 15px 0px 0px; display: inline-block; text-align: center; width: 88px;">
<div style="margin: 15px 0px 0px; display: inline-block; text-align: center; width: 88px;">
// no script declaration, for failure condition
<noscript>
<div style="display: inline-block; padding: 2px 4px; margin: 0px 0px 5px; border: 1px solid #cccccc; text-align: center; background-color: #ffffff;">
// link of the info access route
<a href="http://localtimes.info/Asia/India/Delhi/" style="text-decoration: none; font-size: 13px; color: #000000;">
<img src="http://localtimes.info/images/countries/in.png"="" border=0="" style="border:0;margin:0;padding:0"=""> Delhi</a>
</div>
</noscript>
// main functioning of script file
<script type="text/javascript" src="http://localtimes.info/clock.php? continent=Asia&country=India&city=Delhi&cp1_Hex=000000&cp2_Hex=FFFFFF&cp3_Hex=000000&fwdt=88&ham=
0&hbg=0&hfg=0&sid=0&mon=0&wek=0&wkf=0&sep=0&widget_number=1012">
</script>
</div>
![]()
Clock 2 | Code
This clock contains a little bit of more functionality than the first one, its features are:
- Based on JavaScript
- You can select your country locations too.
- Proper date and time management
- Grid view of the clock.
<div style="margin: 15px 0px 0px; display: inline-block; text-align: center; width: 88px;">
<div style="display: inline-block; padding: 2px 4px; margin: 0px 0px 5px; border: 1px solid #cccccc; text-align: center; background-color: #ffffff;">
<a href="http://localtimes.info/Asia/India/Delhi/" style="text-decoration: none; font-size: 13px; color: #000000;"><img src="http://localtimes.info/images/countries/in.png"="" border=0="" style="border:0;margin:0;padding:0"="">
</a>
</div>
// main functioning of script file
<script type="text/javascript" src="http://localtimes.info/clock.php? continent=Asia&country=India&city=Delhi&cp1_Hex=000000&cp2_Hex=FFFFFF&cp3_Hex=000000&fwdt=
88&ham=0&hbg=0&hfg=0&sid=0&mon=0&wek=0&wkf=0&sep=0&widget_number=1025">
</script>
</div>
![]()
Clock 3 | Code
This third clock is a combination of both first and second one. This clock also uses JavaScript.
<div style="margin: 15px 0px 0px; display: inline-block; text-align: center; width: 88px;">
// no script declaration, for failure condition
<noscript>
<div style="display: inline-block; padding: 2px 4px; margin: 0px 0px 5px; border: 1px solid #cccccc; text-align: center; background-color: #ffffff;">
</div>
</noscript>
// main functioning of script file
<script type="text/javascript" src="http://localtimes.info/clock.php? continent=Asia&country=India&city=Delhi&cp1_Hex=000000&cp2_Hex=FFFFFF&cp3_Hex=000000&fwdt=88&ham=0&hbg=0&hfg=0&sid=
0&mon=0&wek=0&wkf=0&sep=0&widget_number=1012">
</script>
</div>