Posted By

MMDeveloper on 09/16/08


Tagged

javascript class oop timer


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

arala22


Timer


 / Published in: JavaScript
 

URL: http://www.mechanicmatt.com

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>OOP JS Timer; by: Matt Ford</title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
  7. <script type="text/javascript">
  8. <!--
  9. var timer = {
  10. clockID: "currentTime",
  11. timerStartID: "startTime",
  12. timerTotalID: "timerTotal",
  13. numSeconds: 0,
  14. timerIsActive: false,
  15.  
  16. getCTime: function() {
  17. mydate = new Date();
  18.  
  19. hours = mydate.getHours();
  20. minutes = mydate.getMinutes();
  21. seconds = mydate.getSeconds();
  22. dn = "AM";
  23.  
  24.  
  25. if (hours >= 12) {
  26. dn = "PM";
  27. } else {}
  28.  
  29. if (hours > 12){
  30. hours = hours - 12;
  31. } else {}
  32.  
  33. if (hours == 0) {
  34. hours = 12;
  35. } else {}
  36.  
  37. if (minutes <= 9) {
  38. minutes = "0" + minutes;
  39. } else {}
  40.  
  41. if (seconds <= 9) {
  42. seconds = "0" + seconds;
  43. } else {}
  44.  
  45. cdate = this.leadingZeros(hours, 2, "0") + ":" + this.leadingZeros(minutes, 2, "0") + ":" + this.leadingZeros(seconds, 2, "0") + " " + dn;
  46.  
  47. if (this.timerIsActive === true) {
  48. this.updateTimer();
  49. } else {}
  50.  
  51. return cdate;
  52. },
  53.  
  54. updateCTime: function() {
  55. if (this.clockID != "") {
  56. $(this.clockID).innerHTML = this.getCTime();
  57.  
  58. setTimeout("timer.updateCTime()", 1000);
  59. } else {}
  60. },
  61.  
  62. startTime: function() {
  63. $(this.timerStartID).innerHTML = this.getCTime();
  64. },
  65.  
  66. startTimer: function() {
  67. this.stopClear();
  68. this.timerIsActive = true;
  69. this.startTime();
  70. },
  71.  
  72. pauseTimer: function() {
  73. if (this.timerIsActive === false) {
  74. this.timerIsActive = true;
  75. }
  76. else {
  77. this.timerIsActive = false;
  78. }
  79. },
  80.  
  81. stopClear: function() {
  82. this.timerIsActive = false;
  83. $(this.timerStartID).innerHTML = "n/a";
  84. $(this.timerTotalID).innerHTML = "n/a hours<br />n/a minutes<br />n/a seconds";
  85. this.numSeconds = 0;
  86. },
  87.  
  88. updateTimer: function() {
  89. timeParts = this.convertSeconds();
  90. $(this.timerTotalID).innerHTML = this.leadingZeros(timeParts[0], 2, "0") + " hours <br />" + this.leadingZeros(timeParts[1], 2, "0") + " minutes<br />" + this.leadingZeros(timeParts[2], 2, "0") + " seconds";
  91.  
  92. ++this.numSeconds;
  93. },
  94.  
  95. convertSeconds: function() {
  96. secondsInHour = 3600;
  97. secondsInMinute = 60;
  98. Hours = Math.floor(this.numSeconds / secondsInHour);
  99. Minutes = Math.floor((this.numSeconds - (Hours * secondsInHour)) / secondsInMinute);
  100. Seconds = (this.numSeconds - (Hours * secondsInHour) - (Minutes * secondsInMinute));
  101.  
  102. return [Hours, Minutes, Seconds];
  103. },
  104.  
  105. initCode: function() {
  106. this.updateCTime();
  107. this.stopClear();
  108. },
  109.  
  110. leadingZeros: function(num, totalChars, padWith) {
  111. num = num + "";
  112. padWith = (padWith) ? padWith : "0";
  113. if (num.length < totalChars) {
  114. while (num.length < totalChars) {
  115. num = padWith + num;
  116. }
  117. } else {}
  118.  
  119. if (num.length > totalChars) { //if padWith was a multiple character string and num was overpadded
  120. num = num.substring((num.length - totalChars), totalChars);
  121. } else {}
  122.  
  123. return num;
  124. }
  125. };
  126. -->
  127. </script>
  128. <style type="text/css">
  129. <!--
  130. .cTimeText {
  131. color: #666666;
  132. font-size: 17px;
  133. font-weight: bold;
  134. text-align: center;
  135. }
  136. .time {
  137. font-size: 40px;
  138. font-weight: bold;
  139. text-align: center;
  140. }
  141. .controls {
  142. text-align: center;
  143. }
  144. .CTB {
  145. font-size: 16px;
  146. font-weight: bold;
  147. }
  148. .inner {
  149. padding: 10px;
  150. }
  151. .header {
  152. text-align: center;
  153. background-color: #355F91;
  154. margin-bottom: 10px;
  155. }
  156. .copyright {
  157. font-size: 8px;
  158. color: #CCCCCC;
  159. text-align: center;
  160. position: absolute;
  161. bottom: 0px;
  162. left: 0px;
  163. width: 100%;
  164. }
  165. .spacer {
  166. padding-top: 10px;
  167. }
  168. .container {
  169. width: 400px;
  170. border: 1px solid #000000;
  171. }
  172. .controls img {
  173. cursor: pointer;
  174. }
  175. -->
  176. </style>
  177. </head>
  178. <body onload="timer.initCode()">
  179. <table align="center" cellspacing="0" class="container">
  180. <tr>
  181. <td valign="top" nowrap="nowrap">
  182. <div class="inner">
  183. <div class="cTimeText">current time:</div>
  184. <div class="time" id="currentTime">00:00:00 PM</div>
  185. <div class="spacer">&nbsp;</div>
  186. <div class="cTimeText">start time:</div>
  187. <div class="time" id="startTime">n/a</div>
  188. <div class="spacer">&nbsp;</div>
  189. <div class="cTimeText">timer total:</div>
  190. <div class="time" id="timerTotal">&nbsp;</div>
  191. <div class="spacer">&nbsp;</div>
  192. <div class="controls"><img src="images/start.jpg" alt="" width="106" height="47" onclick="timer.startTimer();" /><br />
  193. <img src="images/pause.jpg" alt="" width="106" height="47" onclick="timer.pauseTimer();" /><br />
  194. <img src="images/stop.jpg" alt="" width="106" height="47" onclick="timer.stopClear();" /></div>
  195. </div></td>
  196. </tr>
  197. </table>
  198. <div class="copyright">Copyright &copy; Matt Ford. All Rights Reserved.</div>
  199. </body>
  200. </html>

Report this snippet  

You need to login to post a comment.