I'd like to add a clock to my web site, displaying the time in the Central time zone. I have included the code I have thus far. I want to use this to tell users when other tools on my web site will be active (they are not active during the night in the Central time zone). Does anyone know how to (1) lock this to central time; and (2) perhaps turn it a red color from 8:00 p.m. - 7:30 a.m. (indicating the tools are turned off)?

<script type="text/javascript">

function GetClock(){
d = new Date();
nhour  = d.getHours();
nmin   = d.getMinutes();
     if(nhour ==  0) {ap = " AM";nhour = 12;} 
else if(nhour <= 11) {ap = " AM";} 
else if(nhour == 12) {ap = " PM";} 
else if(nhour >= 13) {ap = " PM";nhour -= 12;}

if(nmin <= 9) {nmin = "0" +nmin;}

document.getElementById('clockbox').innerHTML=""+nhour+":"+nmin+ap+"";
setTimeout("GetClock()", 1000);
}
window.onload=GetClock;
</script>
<div id="clockbox"></div>

I'd like to add a clock to my web site, displaying the time in the Central time zone. I have included the code I have thus far. I want to use this to tell users when other tools on my web site will be active (they are not active during the night in the Central time zone). Does anyone know how to (1) lock this to central time; and (2) perhaps turn it a red color from 8:00 p.m. - 7:30 a.m. (indicating the tools are turned off)?

<script type="text/javascript">

function GetClock(){
d = new Date();
nhour  = d.getHours();
nmin   = d.getMinutes();
     if(nhour ==  0) {ap = " AM";nhour = 12;} 
else if(nhour <= 11) {ap = " AM";} 
else if(nhour == 12) {ap = " PM";} 
else if(nhour >= 13) {ap = " PM";nhour -= 12;}

if(nmin <= 9) {nmin = "0" +nmin;}

document.getElementById('clockbox').innerHTML=""+nhour+":"+nmin+ap+"";
setTimeout("GetClock()", 1000);
}
window.onload=GetClock;
</script>
<div id="clockbox"></div>

• javascript
• time
• clock

2 Answers 2

If you create a local date object, it will be in the timezone of the local system (whatever that might be set to, which might not be the actual local time zone). Date objects have a getTimezoneOffset method that returns a number in minutes that, if added to the local date object, sets it to UTC (essentially GMT). You can then subtract the offset for "central time" (whatever that might be) to get a time in that timezone.

You can then use that date object for times in that zone.

If the timezone is the US Central time zone, the standard offset is -6 hours, the daylight saving offset is -5 hours. A function that returns a date object with a specific offset is:

/* Create a date object with the desired offset.
   Offset is the time that must be added to local time to get
   UTC, so if time zone is -6hrs, offset is +360. If time zone
   is +10hrs, offset is -600.
*/
function getOffsetDate(offsetInMintues) {
  // Get local date object
  var d = new Date();
  // Add local time zone offset to get UTC and 
  // Subtract offset to get desired zone
  d.setMinutes(d.getMinutes() + d.getTimezoneOffset() - offsetInMintues);
  return d;
}

Give it the appropriate offset and it will return a date object with that offset. To get US standard central time:

var centralDate = getOffsetDate(360);

For US central daylight saving time:

var centralDSTDate = getOffsetDate(300);

To do something between specific times, you can do something like:

var h = centralDate.getHours();
var m = centralDate.getMinutes(); 
if (h >= 20 || 
  h <7 ||
  (h == 7 && m <= 30) {
  // the time is between 20:00 and 07:30 the following day.
}

The Date object can be modified to any value you like and will be corrected automatically. "windTheClock(2);" sets time zone offset to +2 UTC.

<script type="text/javascript">

function addLeadingZero(n) {
    if (n < 10) {
        n = "0" + n;
    }
    return n;
}

function windTheClock(timeZoneOffset)
{
    var d = new Date();
    d.setHours(d.getUTCHours() + timeZoneOffset); // set time zone offset
    var h = d.getHours();
    var m = d.getMinutes();
    var s = d.getSeconds();
    h = addLeadingZero(h);
    m = addLeadingZero(m);
    s = addLeadingZero(s);
    document.all["clock"].innerHTML = h + ":" + m + ":" + s;
    setTimeout(function(){ windTheClock(timeZoneOffset) }, 1000);
}

window.onload = function() {
    windTheClock(2);
}

</script>

<div id="clock"></div>

version w/ am/pm

function addLeadingZero(n) {
    return n < 10 ? '0' + n : n;
}

function windTheClock(timeZoneOffset)
{
    var d = new Date();
    d.setHours(d.getUTCHours() + timeZoneOffset); // set time zone offset
    var h = d.getHours();
    var m = d.getMinutes();
    var s = d.getSeconds();
    var ampm = h >= 12 ? 'pm' : 'am';
    h = h % 12;
    h = h ? h : 12; // replace '0' w/ '12'
    h = addLeadingZero(h);
    m = addLeadingZero(m);
    s = addLeadingZero(s);

    document.all["clock"].innerHTML = h + ':' + m + ':' + s
        + ' ' + ampm;
    setTimeout(function(){ windTheClock(timeZoneOffset) }, 1000);
}

window.onload = function() {
    windTheClock(2);
}

https://jsfiddle/dzyubak/rae8j6xn/