Displaying 4 timezones in a specific way

**ccscull** · 03-30-2010, 10:51 PM

Hi i am having a problem with some code. I want to display the day of the week and time of day (Tue 4:50 PM) for 4 cites around the world. I came up with some code but it goes fubar when that particular city goes past midnight.

Here is the code I am using:

Code:

<table border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td align="right"><strong>Denver:</strong></td>
    <td><script language="JavaScript">
  var currentTime = new Date()
  var theDays= ["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun"]
 	today=new Date()
	thisDay=today.getUTCDay()
	thisDay=theDays[thisDay]
  var hours = currentTime.getUTCHours() - 6
  var minutes = currentTime.getUTCMinutes()
 
  var suffix = "AM";
  if (hours >= 12) {
  suffix = "PM";
  hours = hours - 12;
  }
  if (hours == 0) {
  hours = 12;
  }
 
  if (minutes < 10)
  minutes = "0" + minutes
 
  document.write("<span class=redtime>" + thisDay  + " " + hours + ":" + minutes + " " + suffix + "</span>")
;
</script></td>
  </tr>
  <tr>
    <td align="right"><strong>New York:</strong></td>
    <td><script language="JavaScript">
  var currentTime = new Date()
  var theDays= ["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun"]
 	today=new Date()
	thisDay=today.getUTCDay()
	thisDay=theDays[thisDay]
  var hours = currentTime.getUTCHours() - 4
  var minutes = currentTime.getUTCMinutes()
 
  var suffix = "AM";
  if (hours >= 12) {
  suffix = "PM";
  hours = hours - 12;
  }
  if (hours == 0) {
  hours = 12;
  }
 
  if (minutes < 10)
  minutes = "0" + minutes
 
  document.write("<span class=redtime>" + thisDay  + " " + hours + ":" + minutes + " " + suffix + "</span>")
;
</script></td>
  </tr>
  <tr>
    <td align="right"><strong>Frankfurt:</strong></td>
    <td><script language="JavaScript">
  var currentTime = new Date()
  var theDays= ["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun"]
 	today=new Date()
	thisDay=today.getUTCDay()
	thisDay=theDays[thisDay]
  var hours = currentTime.getUTCHours() + 1
  var minutes = currentTime.getUTCMinutes()
 
  var suffix = "AM";
  if (hours >= 12) {
  suffix = "PM";
  hours = hours - 12;
  }
  if (hours == 0) {
  hours = 12;
  }
 
  if (minutes < 10)
  minutes = "0" + minutes
 
  document.write("<span class=redtime>" + thisDay  + " " + hours + ":" + minutes + " " + suffix + "</span>")
;
</script></td>
  </tr>
  <tr>
    <td align="right"><strong>Hong Kong:</strong></td>
    <td><script language="JavaScript">
	
  var currentTime = new Date()
  var theDays= ["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun"]
 	today=new Date()
	thisDay=today.getUTCDay()
	thisDay=theDays[thisDay]
  var hours = currentTime.getUTCHours()
  var minutes = currentTime.getUTCMinutes()
 
  var suffix = "AM";
  if (hours >= 12) {
  suffix = "PM";
  }
 
  if (minutes < 10)
  minutes = "0" + minutes
 
  document.write("<span class=redtime>" + thisDay  + " " + hours + ":" + minutes + " " + suffix + "</span>")
;
</script></td>
  </tr>
</table>

**vwphillips** · 03-31-2010, 07:43 AM

Code:

var hours = (currentTime.getUTCHours() - 4+24)%24

tfor the correct day

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/
function MyDate(nu){
  var theDays= ["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
  var today=new Date();
  today=new Date(today.getFullYear(),today.getMonth(),today.getDate(),today.getHours()+nu,today.getMinutes(),0,0);
  var thisDay=today.getUTCDay()
  var thisDay=theDays[today.getUTCDay()]
  var hours = today.getUTCHours();
  var minutes = today.getUTCMinutes()

  var suffix = "AM";
  if (hours >= 12) {
  suffix = "PM";
  hours = hours - 12;
  }
  if (hours == 0) {
  hours = 12;
  }

  if (minutes < 10)
  minutes = "0" + minutes

  document.write("<span class=redtime>" + thisDay  + " " + hours + ":" + minutes + " " + suffix + "</span>");
;
}
/*]]>*/
</script></head>

<body>
<table border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td align="right"><strong>Denver:</strong></td>
    <td>
    <script type="text/javascript" >
     MyDate(-6);
    </script>
</td>
  </tr>
  <tr>
    <td align="right"><strong>New York:</strong></td>
    <td>
    <script type="text/javascript" >
     MyDate(-4);
    </script>
</td>
  </tr>
  <tr>
    <td align="right"><strong>Frankfurt:</strong></td>
    <td>
    <script type="text/javascript" >
     MyDate(1);
   </script>
</td>
  </tr>
  <tr>
    <td align="right"><strong>Hong Kong:</strong></td>
    <td>
    <script type="text/javascript" >
     MyDate(0);
    </script>
</td>
  </tr>
</table>
</body>

</html>

**ccscull** · 03-31-2010, 05:42 PM

Thanks Vic! That helped...the time is now showing up correctly when it goes past midnight but the day of the week is not changing to the next day. For example the Hong Kong one now says Wed 1:30 AM with the new code but it should display Thu 1:30AM but it is an improvement over displaying Wed 25:35 PM. Now I just need to figure out why it is not displaying the correct day of the week.

Code:

<table border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td align="right"><strong>Denver:</strong></td>
    <td><script language="JavaScript">
  var currentTime = new Date()
  var theDays= ["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun"]
 	today=new Date()
	thisDay=today.getUTCDay()
	thisDay=theDays[thisDay]
var hours = (currentTime.getUTCHours() - 6+24)%24
  var minutes = currentTime.getUTCMinutes()
 
  var suffix = "AM";
  if (hours >= 12) {
  suffix = "PM";
  hours = hours - 12;
  }
  if (hours == 0) {
  hours = 12;
  }
 
  if (minutes < 10)
  minutes = "0" + minutes
 
  document.write("<span class=redtime>" + thisDay  + " " + hours + ":" + minutes + " " + suffix + "</span>")
;
</script></td>
  </tr>
  <tr>
    <td align="right"><strong>New York:</strong></td>
    <td><script language="JavaScript">
  var currentTime = new Date()
  var theDays= ["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun"]
 	today=new Date()
	thisDay=today.getUTCDay()
	thisDay=theDays[thisDay]
var hours = (currentTime.getUTCHours() - 4+24)%24
  var minutes = currentTime.getUTCMinutes()
 
  var suffix = "AM";
  if (hours >= 12) {
  suffix = "PM";
  hours = hours - 12;
  }
  if (hours == 0) {
  hours = 12;
  }
 
  if (minutes < 10)
  minutes = "0" + minutes
 
  document.write("<span class=redtime>" + thisDay  + " " + hours + ":" + minutes + " " + suffix + "</span>")
;
</script></td>
  </tr>
  <tr>
    <td align="right"><strong>Frankfurt:</strong></td>
    <td><script language="JavaScript">
  var currentTime = new Date()
  var theDays= ["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun"]
 	today=new Date()
	thisDay=today.getUTCDay()
	thisDay=theDays[thisDay]
var hours = (currentTime.getUTCHours() + 1+24)%24
  var minutes = currentTime.getUTCMinutes()
 
  var suffix = "AM";
  if (hours >= 12) {
  suffix = "PM";
  hours = hours - 12;
  }
  if (hours == 0) {
  hours = 12;
  }
 
  if (minutes < 10)
  minutes = "0" + minutes
 
  document.write("<span class=redtime>" + thisDay  + " " + hours + ":" + minutes + " " + suffix + "</span>")
;
</script></td>
  </tr>
  <tr>
    <td align="right"><strong>Hong Kong:</strong></td>
    <td><script language="JavaScript">
	
  var currentTime = new Date()
  var theDays= ["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun"]
 	today=new Date()
	thisDay=today.getUTCDay()
	thisDay=theDays[thisDay]
var hours = (currentTime.getUTCHours() + 8+24)%24

  var minutes = currentTime.getUTCMinutes()
 
  var suffix = "AM";
  if (hours >= 12) {
  suffix = "PM";
  }
 
  if (minutes < 10)
  minutes = "0" + minutes
 
  document.write("<span class=redtime>" + thisDay  + " " + hours + ":" + minutes + " " + suffix + "</span>")
;
</script></td>
  </tr>
</table>

**vwphillips** · 04-01-2010, 08:59 AM

the second script I posted acounts for the change of day

**ccscull** · 04-01-2010, 02:10 PM

Oops sorry that code looked like the code I already had. I will try it. Thank you very much for your help.

**ccscull** · 04-01-2010, 02:41 PM

I tried the other code and it works great! Thanks sooo much for your help! I am just starting javascript and getting diffrent elements to work is the hardest part...about pulled my hair out.

Thread: Displaying 4 timezones in a specific way

Thread Tools

Search Thread

Displaying 4 timezones in a specific way

The Following User Says Thank You to vwphillips For This Useful Post:

Thanks

Bookmarks

Bookmarks

Posting Permissions