Introduction

In this article, we will see how to create clocks on our webpage with JavaScript. We can create the clocks on the server-side using the timer control and an update panel that periodically makes a postback to the server and this clock will show the server time. If we want to create the clock on the client side then that can be done using only JavaScript.

Background

While searching using Google I found many examples of creating a clock with JavaScript on the client-side. From that, I'm giving here three examples that can be helpful to display a clock on the client browser without much effort. So we will see three clocks one-by-one.
Simple Clock
This clock is a very basic clock that will look like the following screenshot:
simpleclock.bmp
Use the following procedure to create this 24-hour format clock.
Step 1
Add a new page to the application and write the following script in the head section of the page as in the following:
  1. <head>
  2. <script language="JavaScript">
  3. var clockID = 0;
  5. function UpdateClock() {
  6. if (clockID) {
  7. clearTimeout(clockID);
  8. clockID = 0;
  9. }
  11. var tDate = new Date();
  13. if ((tDate.getSeconds()) <= 9) {
  14. document.theClock.theTime.value = ""
  15. + tDate.getHours() + ":"
  16. + tDate.getMinutes() + ":0"
  17. + tDate.getSeconds();
  18. document.title = "The time is: "
  19. + tDate.getHours() + ":"
  20. + tDate.getMinutes() + ":0"
  21. + tDate.getSeconds();
  22. } else if ((tDate.getMinutes()) <= 9) {
  23. document.theClock.theTime.value = ""
  24. + tDate.getHours() + ":0"
  25. + tDate.getMinutes() + ":"
  26. + tDate.getSeconds();
  27. document.title = "The time is: "
  28. + tDate.getHours() + ":0"
  29. + tDate.getMinutes() + ":"
  30. + tDate.getSeconds();
  31. } else if (((tDate.getSeconds()) <= 9) && ((tDate.getMinutes()) <= 9)) {
  32. document.theClock.theTime.value = ""
  33. + tDate.getHours() + ":0"
  34. + tDate.getMinutes() + ":0"
  35. + tDate.getSeconds();
  36. document.title = "The time is: "
  37. + tDate.getHours() + ":0"
  38. + tDate.getMinutes() + ":0"
  39. + tDate.getSeconds();
  40. } else {
  42. document.theClock.theTime.value = ""
  43. + tDate.getHours() + ":"
  44. + tDate.getMinutes() + ":"
  45. + tDate.getSeconds();
  46. document.title = "The time is: "
  47. + tDate.getHours() + ":"
  48. + tDate.getMinutes() + ":"
  49. + tDate.getSeconds();
  50. }
  52. clockID = setTimeout("UpdateClock()", 1000);
  53. }
  54. function StartClock() {
  55. clockID = setTimeout("UpdateClock()", 500);
  56. }
  58. function KillClock() {
  59. if (clockID) {
  60. clearTimeout(clockID);
  61. clockID = 0;
  62. }
  63. }
  65. </script>
  66. </head>
    Step 2
    We have the script ready. We now need to call the StartClock and StopClock functions in the body section as in the following
    1. <body onload="StartClock()" onunload="KillClock()">
    Step 3
    In the form now create the control to display the time. We will create a TextBox input control of HTML to display the time.
    1. <input name="theTime" size="8" type="text"/>
    Clock With Images
    This clock looks like a very effective clock because this clock uses it's GUI with images to display the time to the client. This clock looks as in the following image.
    imageclock.bmp
    Use the following procedure to create this clock.
    Step 1
    Add a new page to your application; copy the images uploaded with attachments and paste it into your root directory.
    Step 2
    In the body, the section writes the script given below. Initially, we need to display the static images and then write the script
    1. <body>
    2. <form id="form1" runat="server">
    3. <div>
    4. <table>
    5. <tr>
    6. <td bgcolor="black" height="45">
    7. <img src="dg8.gif" name="hr1">
    8. <img src="dg8.gif" name="hr2">
    9. <img src="dgc.gif" name="c">
    10. <img src="dg8.gif" name="mn1">
    11. <img src="dg8.gif" name="mn2">
    12. <img src="dgc.gif" name="c">
    13. <img src="dg8.gif" name="se1">
    14. <img src="dg8.gif" name="se2">
    15. <img src="dgpm.gif" name="ampm">
    16. </td></tr></table>
    18. <script language="javascript"><!-- start
    20. dg0 = new Image(); dg0.src = "dg0.gif";
    21. dg1 = new Image(); dg1.src = "dg1.gif";
    22. dg2 = new Image(); dg2.src = "dg2.gif";
    23. dg3 = new Image(); dg3.src = "dg3.gif";
    24. dg4 = new Image(); dg4.src = "dg4.gif";
    25. dg5 = new Image(); dg5.src = "dg5.gif";
    26. dg6 = new Image(); dg6.src = "dg6.gif";
    27. dg7 = new Image(); dg7.src = "dg7.gif";
    28. dg8 = new Image(); dg8.src = "dg8.gif";
    29. dg9 = new Image(); dg9.src = "dg9.gif";
    30. dgam = new Image(); dgam.src = "dgam.gif";
    31. dgpm = new Image(); dgpm.src = "dgpm.gif";
    32. dgc = new Image(); dgc.src = "dgc.gif";
    34. function dotime() {
    35. theTime = setTimeout('dotime()', 1000);
    36. d = new Date();
    37. hr = d.getHours() + 100;
    38. mn = d.getMinutes() + 100;
    39. se = d.getSeconds() + 100;
    40. if (hr == 100) { hr = 112; am_pm = 'am'; }
    41. else if (hr < 112) { am_pm = 'am'; }
    42. else if (hr == 112) { am_pm = 'pm'; }
    43. else if (hr > 112) { am_pm = 'pm'; hr = (hr - 12); }
    44. tot = '' + hr + mn + se;
    45. document.hr1.src = 'dg' + tot.substring(1, 2) + '.gif';
    46. document.hr2.src = 'dg' + tot.substring(2, 3) + '.gif';
    47. document.mn1.src = 'dg' + tot.substring(4, 5) + '.gif';
    48. document.mn2.src = 'dg' + tot.substring(5, 6) + '.gif';
    49. document.se1.src = 'dg' + tot.substring(7, 8) + '.gif';
    50. document.se2.src = 'dg' + tot.substring(8, 9) + '.gif';
    51. document.ampm.src = 'dg' + am_pm + '.gif';
    52. }
    53. dotime();
    54. //end -->
    55. </script>
    57. </div>
    58. </form>
    59. <p>
    60. <strong>Clock Created Using Images</strong></p>
    61. </body>
      Movable Clock
      This clock is a very attractive and animated clock along with the previous two clocks. This clock will appear only in IE; it is not supported in other browsers. This clock will look like the following.
      movable.bmp
      Use the following procedure to create this clock.
      Step 1
      Add a new form and by default, our form has some lines written as in the following.
      1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      Here it's specifying the XHTML 1.0 but we need to modify this to HTML 4.0 as in the following
      1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      Step 2
      Write the following script in the body
      1. <body>
      2. <script language="JavaScript" type="text/javascript"><!--
      4. dCol = 'Red'; //date colour.
      5. fCol = 'Green'; //face colour.
      6. sCol = 'Black'; //seconds colour.
      7. mCol = 'Blue'; //minutes colour.
      8. hCol = '000000'; //hours colour.
      9. ClockHeight = 40;
      10. ClockWidth = 40;
      11. ClockFromMouseY = 0;
      12. ClockFromMouseX = 100;
      14. //Alter nothing below! Alignments will be lost!
      16. d = new Array("SUNDAY", "MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY", "SATURDAY");
      17. m = new Array("JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER");
      18. date = new Date();
      19. day = date.getDate();
      20. year = date.getYear();
      21. if (year < 2000) year = year + 1900;
      22. TodaysDate = " " + d[date.getDay()] + " " + day + " " + m[date.getMonth()] + " " + year;
      23. D = TodaysDate.split('');
      24. H = '...';
      25. H = H.split('');
      26. M = '....';
      27. M = M.split('');
      28. S = '.....';
      29. S = S.split('');
      30. Face = '1 2 3 4 5 6 7 8 9 10 11 12';
      31. font = 'Arial';
      32. size = 1;
      33. speed = 0.5;
      34. ns = (document.layers);
      35. ie = (document.all);
      36. Face = Face.split(' ');
      37. n = Face.length;
      38. a = size * 10;
      39. ymouse = 0;
      40. xmouse = 0;
      41. scrll = 0;
      42. props = "<font face=" + font + " size=" + size + " color=" + fCol + "><B>";
      43. props2 = "<font face=" + font + " size=" + size + " color=" + dCol + "><B>";
      44. Split = 360 / n;
      45. Dsplit = 360 / D.length;
      46. HandHeight = ClockHeight / 4.5
      47. HandWidth = ClockWidth / 4.5
      48. HandY = -7;
      49. HandX = -2.5;
      50. scrll = 0;
      51. step = 0.06;
      52. currStep = 0;
      53. y = new Array(); x = new Array(); Y = new Array(); X = new Array();
      54. for (i = 0; i < n; i++) { y[i] = 0; x[i] = 0; Y[i] = 0; X[i] = 0 }
      55. Dy = new Array(); Dx = new Array(); DY = new Array(); DX = new Array();
      56. for (i = 0; i < D.length; i++) { Dy[i] = 0; Dx[i] = 0; DY[i] = 0; DX[i] = 0 }
      57. if (ns) {
      58. for (i = 0; i < D.length; i++)
      59. document.write('<layer name="nsDate' + i + '" top=0 left=0 height=' + a + ' width=' + a + '><center>' + props2 + D[i] + '</font></center></layer>');
      60. for (i = 0; i < n; i++)
      61. document.write('<layer name="nsFace' + i + '" top=0 left=0 height=' + a + ' width=' + a + '><center>' + props + Face[i] + '</font></center></layer>');
      62. for (i = 0; i < S.length; i++)
      63. document.write('<layer name=nsSeconds' + i + ' top=0 left=0 width=15 height=15><font face=Arial size=3 color=' + sCol + '><center><b>' + S[i] + '</b></center></font></layer>');
      64. for (i = 0; i < M.length; i++)
      65. document.write('<layer name=nsMinutes' + i + ' top=0 left=0 width=15 height=15><font face=Arial size=3 color=' + mCol + '><center><b>' + M[i] + '</b></center></font></layer>');
      66. for (i = 0; i < H.length; i++)
      67. document.write('<layer name=nsHours' + i + ' top=0 left=0 width=15 height=15><font face=Arial size=3 color=' + hCol + '><center><b>' + H[i] + '</b></center></font></layer>');
      68. }
      69. if (ie) {
      70. document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
      71. for (i = 0; i < D.length; i++)
      73. document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:' + a + ';width:' + a + ';text-align:center">' + props2 + D[i] +'</B></font></div>');
      74. document.write('</div></div>');
      75. document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
      76. for (i = 0; i < n; i++)
      77. document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:' + a + ';width:' + a + ';text-align:center">' + props + Face[i] + '</B></font></div>');
      78. document.write('</div></div>');
      79. document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
      80. for (i = 0; i < H.length; i++)
      81. document.write('<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + hCol + ';text-align:center;font-weight:bold">' + H[i] + '</div>');
      82. document.write('</div></div>');
      83. document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
      84. for (i = 0; i < M.length; i++)
      85. document.write('<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + mCol + ';text-align:center;font-weight:bold">' + M[i] + '</div>');
      86. document.write('</div></div>')
      87. document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
      88. for (i = 0; i < S.length; i++)
      89. document.write('<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + sCol + ';text-align:center;font-weight:bold">' + S[i] + '</div>');
      90. document.write('</div></div>')
      91. }
      92. (ns) ? window.captureEvents(Event.MOUSEMOVE) : 0;
      93. function Mouse(evnt) {
      94. ymouse = (ns) ? evnt.pageY + ClockFromMouseY - (window.pageYOffset) : event.y + ClockFromMouseY;
      95. xmouse = (ns) ? evnt.pageX + ClockFromMouseX : event.x + ClockFromMouseX;
      96. }
      97. (ns) ? window.onMouseMove = Mouse : document.onmousemove = Mouse;
      98. function ClockAndAssign() {
      99. time = new Date();
      100. secs = time.getSeconds();
      101. sec = -1.57 + Math.PI * secs / 30;
      102. mins = time.getMinutes();
      103. min = -1.57 + Math.PI * mins / 30;
      104. hr = time.getHours();
      105. hrs = -1.575 + Math.PI * hr / 6 + Math.PI * parseInt(time.getMinutes()) / 360;
      106. if (ie) {
      107. Od.style.top = window.document.body.scrollTop;
      108. Of.style.top = window.document.body.scrollTop;
      109. Oh.style.top = window.document.body.scrollTop;
      110. Om.style.top = window.document.body.scrollTop;
      111. Os.style.top = window.document.body.scrollTop;
      112. }
      113. for (i = 0; i < n; i++) {
      114. var F = (ns) ? document.layers['nsFace' + i] : ieFace[i].style;
      115. F.top = y[i] + ClockHeight * Math.sin(-1.0471 + i * Split * Math.PI / 180) + scrll;
      116. F.left = x[i] + ClockWidth * Math.cos(-1.0471 + i * Split * Math.PI / 180);
      117. }
      118. for (i = 0; i < H.length; i++) {
      119. var HL = (ns) ? document.layers['nsHours' + i] : ieHours[i].style;
      120. HL.top = y[i] + HandY + (i * HandHeight) * Math.sin(hrs) + scrll;
      121. HL.left = x[i] + HandX + (i * HandWidth) * Math.cos(hrs);
      122. }
      123. for (i = 0; i < M.length; i++) {
      124. var ML = (ns) ? document.layers['nsMinutes' + i] : ieMinutes[i].style;
      125. ML.top = y[i] + HandY + (i * HandHeight) * Math.sin(min) + scrll;
      126. ML.left = x[i] + HandX + (i * HandWidth) * Math.cos(min);
      127. }
      128. for (i = 0; i < S.length; i++) {
      129. var SL = (ns) ? document.layers['nsSeconds' + i] : ieSeconds[i].style;
      130. SL.top = y[i] + HandY + (i * HandHeight) * Math.sin(sec) + scrll;
      131. SL.left = x[i] + HandX + (i * HandWidth) * Math.cos(sec);
      132. }
      133. for (i = 0; i < D.length; i++) {
      134. var DL = (ns) ? document.layers['nsDate' + i] : ieDate[i].style;
      135. DL.top = Dy[i] + ClockHeight * 1.5 * Math.sin(currStep + i * Dsplit * Math.PI / 180) + scrll;
      136. DL.left = Dx[i] + ClockWidth * 1.5 * Math.cos(currStep + i * Dsplit * Math.PI / 180);
      137. }
      138. currStep -= step;
      139. }
      140. function Delay() {
      141. scrll = (ns) ? window.pageYOffset : 0;
      142. Dy[0] = Math.round(DY[0] += ((ymouse) - DY[0]) * speed);
      143. Dx[0] = Math.round(DX[0] += ((xmouse) - DX[0]) * speed);
      144. for (i = 1; i < D.length; i++) {
      145. Dy[i] = Math.round(DY[i] += (Dy[i - 1] - DY[i]) * speed);
      146. Dx[i] = Math.round(DX[i] += (Dx[i - 1] - DX[i]) * speed);
      147. }
      148. y[0] = Math.round(Y[0] += ((ymouse) - Y[0]) * speed);
      149. x[0] = Math.round(X[0] += ((xmouse) - X[0]) * speed);
      150. for (i = 1; i < n; i++) {
      151. y[i] = Math.round(Y[i] += (y[i - 1] - Y[i]) * speed);
      152. x[i] = Math.round(X[i] += (x[i - 1] - X[i]) * speed);
      153. }
      154. ClockAndAssign();
      155. setTimeout('Delay()', 40);
      156. }
      157. if (ns || ie) window.onload = Delay;
      158. // --></script>
      160. <p>
      161. <strong>Animated Clock:</strong></p>
      162. <p>
      163. <strong>Move the mouse and see what happens.</strong></p>
      165. </body>
        Run the application in IE only and see the effect of this movable clock.

        Conclusion

        Using simple JavaScript-only we can create the various clocks without any extra effort.