Clocks For Websites

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>