Setting timezone for running clock in JavaScript - Stack Overflow

admin管理员组

文章数量:1426901

Good days guys. I have this nice and clean code for a running clock.

<script type="text/javascript">

function DisplayTime(){
if (!document.all && !document.getElementById)
return
timeElement=document.getElementById? document.getElementById("curTime"): document.all.tick2
var CurrentDate=new Date()
var hours=CurrentDate.getHours()
var minutes=CurrentDate.getMinutes()
var seconds=CurrentDate.getSeconds()
var DayNight="PM"
if (hours<12) DayNight="AM";
if (hours>12) hours=hours-12;
if (hours==0) hours=12;
if (minutes<=9) minutes="0"+minutes;
if (seconds<=9) seconds="0"+seconds;
var currentTime=hours+":"+minutes+":"+seconds+" "+DayNight;
timeElement.innerHTML="<font style='font-family:Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,latin-extfont-size:14px;color:#fff;'>"+currentTime+"</b>"
setTimeout("DisplayTime()",1000)
}
window.onload=DisplayTime

</script>

My only problem is it's based the system time. How can I set the timezone so that it will display the correct time based on the timezone specified?

Good days guys. I have this nice and clean code for a running clock.

<script type="text/javascript">

function DisplayTime(){
if (!document.all && !document.getElementById)
return
timeElement=document.getElementById? document.getElementById("curTime"): document.all.tick2
var CurrentDate=new Date()
var hours=CurrentDate.getHours()
var minutes=CurrentDate.getMinutes()
var seconds=CurrentDate.getSeconds()
var DayNight="PM"
if (hours<12) DayNight="AM";
if (hours>12) hours=hours-12;
if (hours==0) hours=12;
if (minutes<=9) minutes="0"+minutes;
if (seconds<=9) seconds="0"+seconds;
var currentTime=hours+":"+minutes+":"+seconds+" "+DayNight;
timeElement.innerHTML="<font style='font-family:Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,latin-extfont-size:14px;color:#fff;'>"+currentTime+"</b>"
setTimeout("DisplayTime()",1000)
}
window.onload=DisplayTime

</script>

My only problem is it's based the system time. How can I set the timezone so that it will display the correct time based on the timezone specified?

• javascript

Share Improve this question Follow asked Aug 29, 2015 at 9:30 Benedict PayotBenedict Payot 42311 gold badge44 silver badges1414 bronze badges 5

• I guess you can't - JS depends solely on the client's time! – bash.d Commented Aug 29, 2015 at 9:32
• The date object gets the time from the user's device. This is solely based on client side. The server side time gets a standard time zone (UTC) I guess, otherwise client side depends on user's time zone. – Hamza Dhamiya Commented Aug 29, 2015 at 9:36
• 1 Side note: That code is awful and horribly outdated. It fails to use basic JavaScript conventions, relies on the horror that is Automatic Semicolon Insertion (but only sometimes), has a workaround for browsers that don't have getElementById (there aren't any anymore, and haven't been for 15 years or so), uses the long-deprecated-and-now-actually-invalid font element, creates an unnecessary global, ... – T.J. Crowder Commented Aug 29, 2015 at 9:39
• 1 you might wanna take a look at moment.js – user786 Commented Aug 29, 2015 at 9:39
• Working code implemented for your requirement see my answer – Ankit Agarwal Commented Aug 29, 2015 at 9:54

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

There's nothing built into the JavaScript Date object that handles any timezones other than local (system) time and UTC.

You can do it by giving your Date instance the wrong time, using the delta between one of those timezones (local or UTC) and the time zone you want to use. It's easier if you use UTC.

So for instance, say we want our time in GMT+01:00:

var dt = new Date();
dt.setTime(dt.getTime() + (60 * 60 * 1000));
//                         ^^^^^^^^^^^^^^---- one hour in milliseconds,
//                                            which is our offset from UTC/GMT
var hours = dt.getUTCHours();       // Use UTC methods to get time
var minutes = dt.getUTCMinutes();
var seconds = dt.getUTCSeconds();

Time stuff, particularly with timezones, is hard. You might look at using a library for it, although for just this sort of clock that would be overkill. One good library is MomentJS (which has a timezone add-on).

You can use getTimezoneOffset method of the Date object. It gives you the timezone offset, according to your timezone in minutes.

So in order to get the current time in UTC (+0 timezone) you can do something of the sort:

var tzOffset = CurrentDate.getTimezoneOffset();

// some timezones are not set hours, so we must calculate the minutes
var minutesOffset = parseInt(tzOffset%60,10);

// the offset hours for the timezone
var hoursOffset = parseInt(tzOffset/60, 10);

Then you need to do some math in your code to account for the offset:

var hours   = CurrentDate.getHours() + hoursOffset;
var minutes = CurrentDate.getMinutes() + minutesOffset;

This would account for your timezone. If you want to calculate another timezone, that you specify, change the tzOffset above to show your timezone.

var tzOffset = CurrentDate.getTimezoneOffset() + TIMEZONE_HOURS*60;

TIMEZONE_HOURS is the timezone in hours you want, e.g. if you want UTC+3, you must set TIMEZONE_HOURS to 3.

As a whole timezones are a bit plicated task because they change a lot and there are some caveats with them. If you want to dwell more into this, check this answer in another question on SO

I have implemented your working code by adding one more function to obtain what you want. See this will help

function DisplayTime(timeZoneOffsetminutes){
if (!document.all && !document.getElementById)
return
timeElement=document.getElementById? document.getElementById("curTime"): document.all.tick2
var requiredDate=getTimeZoneTimeObj(timeZoneOffsetminutes)
var hours=requiredDate.h;
var minutes=requiredDate.m;
var seconds=requiredDate.s;
var DayNight="PM";
if (hours<12) DayNight="AM";
if (hours>12) hours=hours-12;
if (hours==0) hours=12;
if (minutes<=9) minutes="0"+minutes;
if (seconds<=9) seconds="0"+seconds;
var currentTime=hours+":"+minutes+":"+seconds+" "+DayNight;
timeElement.innerHTML="<font style='font-family:Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,latin-extfont-size:14px;color:#fff;'>"+currentTime+"</b>"
setTimeout("DisplayTime(-330)",1000)
}
window.onload=DisplayTime(-330);
function getTimeZoneTimeObj(timeZoneOffsetminutes){
   var localdate = new Date()
   var timeZoneDate = new Date(localdate.getTime() + ((localdate.getTimezoneOffset()- timeZoneOffsetminutes)*60*1000));
  return {'h':timeZoneDate.getHours(),'m':timeZoneDate.getMinutes(),'s':timeZoneDate.getSeconds()};
}

#curTime{
background-color:#000;
}

<div id="curTime"></div>

visit this link as a reference

example:

var x = new Date();
var currentTimeZoneOffsetInHours = x.getTimezoneOffset() / 60;

You can try using moment.js

It is very nice library which handles timezones too.

本文标签： Setting timezone for running clock in JavaScriptStack Overflow