Analysis of the Implementation Process of JavaScript Obtaining Time Zone

In a large project, Inevitably, there will be business of operating time, such as time formatting, such as time addition and subtraction. We will directly use moment. js library to do it. After all, it is stable, reliable and convenient. What should we do when our system is only a few simple pages, the operation of time is not very big, and it is not necessary to introduce library files? Can it be implemented by native methods supported by browsers?

Time zone

What is a time zone?

Time zone is an area on the earth defined by using the same time. In the past, people determined time by observing the exterior (time angle) of the sun, which made the time different at different longitudes. In order to use the same time in unification, the concept of time zone was introduced. Time zone partially solves this problem by setting a standard time. Countries in the world are located in different positions on the earth, so different countries, especially those with large east-west span, must have deviations in sunrise and sunset time, which is time difference.

Time zone representation

Coordinated Universal Time (UTC) is the most important universal time standard, which is based on the second length of yard time and is as close as possible to Greenwich Mean Time in time. Coordinated Universal Time is the main standard for adjusting the clock and time in the world. If the time is expressed in UTC (UTC), "Z" is added after the time, and "Z" is the symbol of 0 time zone in UTC. UTC time is also called Zulu time, because "Zulu" means "Z" in NATO phonetic alphabet.

The UTC offset is expressed as ± [hh]: [mm], ± [hh] [mm], or ± [hh]. For example, if Beijing time is 8 hours earlier than Coordinated Universal Time (UTC), it should be expressed as UTC+8.

JavaScript Get the time zone of the current client

The Intl object is a namespace of the ECMAScript internationalization API that provides precise string comparison, numeric formatting, and date formatting. We need an DateTimeFormat object that uses this API. For details, please refer to: MDN Intl. DateTimeFormat

Get the client's current time zone:

Intl.DateTimeFormat().resolvedOptions().timeZone

You can see the output: Asia/Shanghai, that is, my time zone is Shanghai.

We know which time zone it is in, but we need to express the form of UTC+n at the same time, so how do we know the UTC offset of the current time zone?

We can get it through the getTimezoneOffset method of the Date object instance (note that the unit of the returned result is points):

new Date().getTimezoneOffset()

You can see that the output is-480, so you get the time difference of time zone 0 (time zone 0 minus the current time zone, in minutes).

China Standard Time is based on East Zone 8, which is 8 hours earlier than the time in Time Zone 0. So it is-480, divided by 60, which is the time zone: then-480/60 =-8, which means that the offset of this time zone is now 0-(-8) = 8, which means: UTC+8, and the code is:

'UTC+' + (0 - new Date().getTimezoneOffset() / 60); // 输出：UTC+8

It should be noted that no matter what parameters you instantiate an Date object, when js is stored locally, it will be converted into a local time zone, and js will not help you store the time zone information when instantiating that date.

Comparatively speaking, moment. js is a good time processing library. If there is time operation, it is convenient to use moment. js library directly. Of course, it only displays the time zone under 1, which can be simply processed directly.