HTML 5

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.
  1. <div style="margin: 15px 0px 0px; display: inline-block; text-align: center; width: 88px;">  
  2. <div style="margin: 15px 0px 0px; display: inline-block; text-align: center; width: 88px;">  
  3.     // no script declaration, for failure condition  
  4. <noscript>  
  5. <div style="display: inline-block; padding: 2px 4px; margin: 0px 0px 5px; border: 1px solid #cccccc; text-align: center; background-color: #ffffff;">  
  6.     // link of the info access route  
  7.     <a href="http://localtimes.info/Asia/India/Delhi/" style="text-decoration: none; font-size: 13px; color: #000000;">  
  8.     <img src="http://localtimes.info/images/countries/in.png"="" border=0="" style="border:0;margin:0;padding:0"=""> Delhi</a>  
  9. </div>  
  10. </noscript>  
  11. // main functioning of script file  
  12. <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">  
  13. </script>  
  14. </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.
  1. <div style="margin: 15px 0px 0px; display: inline-block; text-align: center; width: 88px;">  
  2. <div style="display: inline-block; padding: 2px 4px; margin: 0px 0px 5px; border: 1px solid #cccccc; text-align: center; background-color: #ffffff;">  
  3. <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"="">  
  4. </a>  
  5. </div>  
  6. // main functioning of script file  
  7. <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">
  8. </script>  
  9. </div> 
 
 
Clock 3 | Code
 
This third clock is a combination of both first and second one. This clock also uses JavaScript.
  1. <div style="margin: 15px 0px 0px; display: inline-block; text-align: center; width: 88px;">  
  2. // no script declaration, for failure condition  
  3. <noscript>  
  4.     <div style="display: inline-block; padding: 2px 4px; margin: 0px 0px 5px; border: 1px solid #cccccc; text-align: center; background-color: #ffffff;">  
  5.     </div>  
  6. </noscript>  
  7. // main functioning of script file  
  8. <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"> 
  9. </script>  
  10. </div> 

Conclusion

 
In this article, we studied how to generate a clock for websites.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found