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.

  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.