Skip to content

Digital Clock with JavaScript

September 12, 2013

The Script is gets the time of you OS. The code came from here. Really a great site for web developers. Its from a video tutorial so i just added some understanding here with some comments. below is the snapshot of the sample. although you can make it more impressive with some CSS skills

Simple, Free Image and File Hosting at MediaFire

HTML CODE

  1. <html>
  2. <head>
  3. <!– javascript can be found anywhere in the head or body–>
  4. <style type = “text/css” >
  5. <!– determines the size, and background of the digital clock –>
  6. .clockStyle{
  7. width: 100px;
  8. height: 30px;
  9. background-color: #DBC935;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <!– dis div is where we place the clock
  15. identified by javascript through its id name and
  16. styled by css through its class name –>
  17. <div id = “clockDisplay” class = “clockStyle”>
  18. </div>
  19. <script type = “text/javascript” language = “javascript”>
  20. // the script fires off after the element above, the div
  21. // , is loaded, that is why its placed after the div element.
  22. // the function is declared, not runned
  23. function renderTime()
  24. {
  25. //initializes the variables needed
  26. //including the current date of the computer
  27. var currentTime = new Date();
  28. var diem = “AM”;
  29. // method of the date obj.
  30. var h = currentTime.getHours();
  31. var m = currentTime.getMinutes();
  32. var s = currentTime.getSeconds();
  33. //disable military time
  34. // if h is 0 then h is 12
  35. if(h == 0)
  36. h = 12;
  37. // if h goes to 13, then h becomes 1
  38. else if (h > 12)
  39. {
  40. h -= 12;
  41. diem = “PM”;
  42. }
  43. //get the time to display in 00:00:00 format
  44. if(h < 10)
  45. h = “0” + h;
  46. if(m < 10)
  47. m = “0” + m;
  48. if(s < 10)
  49. s = “0” + s;
  50. //gets the id name of the div above
  51. // and display the text in the content of div
  52. var myClock = document.getElementById(‘clockDisplay’);
  53. myClock.textContent = h + “:” + m + “:” + s + ” ” + diem;
  54. //allow to loop every 1000 millisecond
  55. setTimeout(‘renderTime()’, 1000);
  56. }
  57. // this runs the function
  58. renderTime();
  59. </script>
  60. </body>
  61. </html>
Advertisements

From → HTML, JavaScript

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

TurtleAndRobot.com

Children's Book Reviews

Malav Shah

official Web Site

My Road to Programming

The journey of how I taught myself to program.

paritoshmishra

Look at what's brewing up guys! we all are work in progress. So don't meander, lets micromesh everything and have candid conversation about every problem related to C, C++ and JAVA. We can rejuvenate the crinkled faces.

ProgramThat;

A simple guide to programming...

ITechonology

Information Techonology

Rahul's Work

My Work Tips and Tutorial on Various Tech.

Turnip Farmers

Kingdom Scans

Gigaom

Technology news, trends and analysis covering mobile, big data, cloud, science, energy and media

The Neighborhood

society online's social conscious

HarsH ReaLiTy

A Good Blog is Hard to Find

VentureBeat

News About Tech, Money and Innovation

retireediary

The Diary of a Retiree

50 Year Project

My challenge to visit 192 countries, read 1,001 books, and watch the top 100 movies

[BTW] : Ben Trube, Writer

Writer, Programmer, Singer

My Arch Walkthrough

Arch linux made easy

Don Charisma

because anything is possible with Charisma

SutoCom Solutions

Success & Satisfaction with the Cloud

%d bloggers like this: