advanced code snippet search

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

Expand | Embed | Plain Text 
  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.