Shulou(Shulou.com)11/24 Report--

This article comes from Weixin Official Accounts: Low Concurrent Programming (ID: dipingfa), Author: Flash Guest

The cause of the incident is this. Before that, I sent a preview of SpringOne, an official technical conference of Spring.

The schedule of the conference inside is like this on the official website.

Everyone, look at the time column of the first item of the conference. It says:

9:00 PM - 10:00 PM CST

That is, it officially started at 9:00 p.m. that night (images started at 8:00 p.m.).

But one comment from a reader got me thinking.

I looked up CST, which is an abbreviation for so many time zones:

Central Standard Time (US) UTC-6:00

Australia Central Time: Central Standard Time (Australia) UTC+9:30

China Standard Time UTC+8:00

Cuba Standard Time UTC-4:00

I came to the conclusion through analysis that if it starts at 8:00 pm US time, most of the meetings will be held in the early morning, which is not reasonable, so I guess it should be Chinese time, that is, China Standard Time UT+8:00.

But think about it and feel that something is wrong, this Spring official website also takes care of I am Chinese, and then specifically for me to show China time? And how did it know I was Chinese?

I asked an American friend to visit this page, and sure enough, the time is different from what I showed:

Yes 6:00 AM - 7:00 AM PDT

PDT stands for Pacific Daylight Time UTC-7:00

I asked a friend of mine from England to visit me again and got:

2:00 PM - 3:00 PM BST

British Summer Time UTC+1:00

I asked a friend of mine from Germany to visit me again and got:

3:00 PM - 4:00 PM CEST

CEST stands for Central European Summer Time UTC+2:00

There are only so many friends outside our country, and this has been verified. The CST I saw on SpringOne's official website must represent Chinese time, because the time displayed on this website will change with the time zone of the visitor.

And then I thought, well, what's the principle here, what parameter is added to the request header that identifies my time zone?

But after I grabbed the bag, I didn't find any similar parameters.

And then I thought, well, that's based on my request IP?

So I [that] a bit, found that no matter how to switch vpn, the time displayed is always CST, China time.

Just when I was at my wit's end, I asked a British friend of mine who was returning soon. After his visit, he showed that it was also Chinese time!

9:00 PM - 10:00 PM CST

Then he said a word, a period wake up dream person, he said he will soon return home, in order to adapt ahead of time, so the computer time zone set to China.

I see!

I immediately adjusted my time zone to Pacific time in the United States.

Re-open your browser and visit SpringOne.

Time finally changed to Pacific Time, proving that Americans started watching the convention in the morning and continued throughout the day. We Chinese start watching it at night, and then if we want to catch up with the live broadcast, we need to stay up all night.

It also proves that the time displayed on the page is related to the time zone set by my operating system.

But then again, how does the H5 page of this site deal with my system's time?

I started grabbing bags.

First of all, this is definitely not a static page, so it must be a JS action.

Among the js packages I found schedule.js, which is responsible for assigning these times.

Note that getUnixTimestamp is heavily used to get the time.

So I found the definition of this method in another js, in core.min.js.

This method is compressed, formatted, and extracted as follows:

$tzDatetimes:$(".tz-datetime")a.$ tzDatetimes.each(function() { d.convertDatetime(this)})convertDatetime:function(b) { var c=b.dataset.datetimeOut}var h = moment.tz.guess()var c = b.dataset.datetimeOutgetUnixTimestamp:function(b,c){ return moment .tz(b,c"MM/DD/YYYY HH:mm", "America/New_York") .tz(h) .valueOf()} Focus on this function

var h = moment.tz.guess() This function is the key to interacting with the time zone set by the system. It can check your time zone, which is exactly the time zone set by your system.

I set the system time zone to the US Pacific Time Zone (UTC-8:00), and after executing this js code in the browser console, I get the following results:

moment.tz.guess();"America/Los_Angeles" I set the system time zone to Beijing time (UTC+8:00), and after executing this js code in the browser console, I get the following result:

>> moment.tz.guess();"Asia/Shanghai" This is all through, this js function can get the time zone set by our system, and naturally it can dynamically change the time on the page with the system time zone.

How to change it is through the getUnixTimestamp function.

getUnixTimestamp:function(b,c){ return moment .tz(b,c"MM/DD/YYYY HH:mm", "America/New_York") .tz(h) .valueOf()} We know that h represents the time zone, so the first line tz is to set an initial value with US New York time, the second line tz is converted to the time zone set by our system, and the third line valueOf can finally be converted to a timestamp.

Let's take a random value and execute this function in the browser console to verify, for example, we want to see what the result of converting 2021-09-01 08:00 in New York time to Beijing time (the time set by my system) is.

moment \> .tz("09/01/2021 08:00","MM/DD/YYYY HH:mm", "America/New York") \> .tz(moment.tz.guess()) \> .valueOf()1630497600000 This 1630497600000 is converted by timestamp conversion tool, which is:

Perfect, this function converts 2021-09-01 08:00 New York time to 2021-09-01 20:00 Beijing time, exactly 12 hours short, no problem.

So this converted value is populated on the page under the class tz-datetime tag.

$tzDatetimes:$(".tz-datetime")a.$ Datetimes.each(function() { d.convertDatetime(this)}) is exactly where we see it.

At this point, the problem was finally perfectly explained!

Thanks to this reader for his questions, for the support from friends and family around the world, for a fun afternoon of exploration, and for this random post!

I think it's better to be a technical person, that is, without any purpose, just to solve a doubt in my heart, I am willing to spend an afternoon studying and studying, and at the same time, the happiness after reaching a conclusion, I think it is a unique kind of enjoyment.

Then my words are twice as happy, that is, writing articles for everyone to see, reading everyone's comments and likes.

Hope it helps everyone ~

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.