Log in

View Full Version : 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.:confused: Here is the code I am using:


<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
var hours = (currentTime.getUTCHours() - 4+24)%24


tfor the correct day


<!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.

<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.