advanced code snippet search

Posted By

jatkins on 05/21/10


Tagged

time world timezones


Versions (?)

World Time

 / Published in: JavaScript
 

Licensed under CC-by-2.0. Does not account for differences in daylight saving time.

Expand | Embed | Plain Text 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  3. <head>
  4. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. 	<title>Time Zone Converter</title>
  6. 	<script type="text/javascript">
  7. 	<!--
  8. 	var i, timezone, timezones = ['New York/DC/Ottawa', 'Los Angeles', 'Chicago/Austin', 'London', 'Paris/Berlin', 'Moscow', 'Melbourne'],
  9. 	times = [-5, -8, -6, 0, 1, 3, 9], current_time, current_date, local_time, timer, month, day, new_time,
  10. 	months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  11.  
  12. 	function get(elmnt) {
  13. 		return document.getElementById(elmnt);
  14. 	}
  15.  
  16. 	function initialize() {
  17. 		for(i=0;i<timezones.length;i++) {
  18. 			timezone = document.createElement('h2');
  19. 			timezone.id = 'timezone'+i;
  20. 			get('content').appendChild(timezone);
  21. 		}
  22. 		for(i=0;i<months.length;i++) {
  23. 			month = document.createElement('option');
  24. 			month.innerHTML = months[i];
  25. 			get('cboMonths').appendChild(month);
  26. 		}
  27. 		for(i=1;i<=31;i++) {
  28. 			day = document.createElement('option');
  29. 			day.innerHTML = i;
  30. 			get('cboDays').appendChild(day);
  31. 		}
  32. 		current_date = new Date();
  33. 		setTimeout('update_times(null, true);', 1000);
  34. 		get('cboMonths').selectedIndex = current_date.getMonth();
  35. 		get('cboDays').selectedIndex = current_date.getDate()-1;
  36. 		get('txtYear').value = current_date.getFullYear();
  37. 		get('txtTime').value = add_leading_zero(current_date.getHours()) + ':' + add_leading_zero(current_date.getMinutes()) + ':' + add_leading_zero(current_date.getSeconds());
  38. 	}
  39.  
  40. 	function add_leading_zero(number) {
  41. 		return number<10 ? '0'+number : number;
  42. 	}
  43.  
  44. 	function update_times(date, repeat) {
  45. 		date = date ? date : new Date();
  46. 		for(i=0;i<timezones.length;i++) {
  47. 	 		local_time = new Date(date.getTime()+(times[i]*3.6E6));
  48. 			get('timezone'+i).innerHTML = timezones[i] + '<br />' + months[local_time.getMonth()] + ' ' + local_time.getDate() + ', ' + local_time.getFullYear() + ', ' + add_leading_zero(local_time.getHours()) + ':' + add_leading_zero(local_time.getMinutes()) + ':' + add_leading_zero(local_time.getSeconds());
  49. 		}
  50. 		if(repeat) {
  51. 			if(timer) clearTimeout(timer);
  52. 			timer = setTimeout('update_times(null, true);', 1000);
  53. 		}
  54. 	}
  55.  
  56. 	function set_time() {
  57. 		if(timer) clearTimeout(timer);
  58. 		time = new Date();
  59. 		time.setMonth(get('cboMonths').selectedIndex, get('cboDays').selectedIndex+1);
  60. 		time.setYear(parseInt(get('txtYear').value));
  61. 		new_time = get('txtTime').value.split(':');
  62. 		time.setHours(parseInt(new_time[0]));
  63. 		time.setMinutes(parseInt(new_time[1]));
  64. 		time.setSeconds(parseInt(new_time[2]));
  65. 		update_times(time, false);
  66. 	}
  67. 	-->
  68. 	</script>
  69. 	<style type="text/css">
  70. 	<!--
  71. 	body {
  72. 		font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
  73. 	}
  74.  
  75. 	div#content h2 {
  76. 		float: left;
  77. 		margin: 0.5em 3em 0em 0em;
  78. 	}
  79.  
  80. 	br {
  81. 		clear: left;
  82. 	}
  83. 	-->
  84. 	</style>
  85. </head>
  86. <body onload="initialize();">
  87. 	<div id="content">
  88. 		<h1>Time Around The World</h1>
  89. 		<label>Local Time:</label>
  90. 		<select id="cboMonths" onkeypress="if(event.keyCode==13) set_time();"></select>
  91. 		<select id="cboDays" onkeypress="if(event.keyCode==13) set_time();"></select>
  92. 		<input type="text" id="txtYear" value="" onkeypress="if(event.keyCode==13) set_time();" />
  93. 		<input type="text" id="txtTime" value="" onkeypress="if(event.keyCode==13) set_time();" />
  94. 		<button onclick="set_time();">Set Time</button>
  95. 		<button onclick="update_times(null, true);">Reset Clocks</button><br />
  96. 	</div>
  97. </body>
  98. </html>

Report this snippet  

You need to login to post a comment.