服务器端世界时间(UTC)转换客户端时区时间



当你的服务器是针对世界各地用户提供服务的时候，如果正好你想正确显示服务器的时间。那么你应该获取正确的服务器时间并转化成客户端本地时间的时间在客户端显示与调用。而不应该像“铁路购票系统”一样直接使用客户端的本地时间而出现一系列有趣的ＢＵＧ。

那么我们应该如何将服务器的协调世界(UTC)时间转换成我们客户端所在时区的正确时间呢？

我们首先应该了解到的时区概念应该是这样的，比如“北京时间”，相对于“世界时间”要正向偏移８个小时０分钟，表示为“+08 00”；假如世界时间是１０点，那么我们计算出来的北京时间应该是，世界时间１０点+８个小时０分钟＝１８点。

下来我们看看我们是如何从服务器获取世界时间并转化成本地时间的。

首先，我们应该知道本地时间的时区时间偏移量：即介绍中的“+08 00”。

我们使用ＪＳ方法来获得这个值：

</pre><div class="cnblogs_code" style="margin: 5px 0px; padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; color: rgb(0, 0, 0); overflow: auto; font-family: 'Courier New' !important; font-size: 12px !important; background-color: rgb(245, 245, 245);"><div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px; background-color: rgb(245, 245, 245);"><span class="cnblogs_code_copy" style="margin: 0px; padding: 0px 5px 0px 0px; line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;"><a target=_blank title="复制代码" style="margin: 0px; padding: 0px; border: currentColor !important; border-image: none !important; color: rgb(0, 0, 0); text-decoration: none; background-color: rgb(245, 245, 245) !important;" href="javascript:void(0);"><img style="margin: 0px; padding: 0px; border: currentColor !important; border-image: none !important; max-width: 900px; background-color: rgb(245, 245, 245) !important;" alt="复制代码" src="https://i-blog.csdnimg.cn/blog_migrate/69c5a8ac3fa60e0848d784a6dd461da6.gif" /></a></span></div><pre style="margin: 0px; padding: 0px; font-family: 'Courier New' !important; font-size: 12px !important; white-space: pre-wrap; -ms-word-wrap: break-word;"> <span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">function</span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 0); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;"> clientTimeZone() {
            </span><span style="margin: 0px; padding: 0px; color: rgb(0, 128, 0); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">//</span><span style="margin: 0px; padding: 0px; color: rgb(0, 128, 0); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">获得时区偏移量</span>
            <span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">var</span> timeOffset = <span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">new</span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 0); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;"> Date().getTimezoneOffset();
            </span><span style="margin: 0px; padding: 0px; color: rgb(0, 128, 0); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">//</span><span style="margin: 0px; padding: 0px; color: rgb(0, 128, 0); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">获得时区小时偏移基数</span>
            <span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">var</span> hour = parseInt(timeOffset / 60<span style="margin: 0px; padding: 0px; color: rgb(0, 0, 0); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">);
            </span><span style="margin: 0px; padding: 0px; color: rgb(0, 128, 0); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">//</span><span style="margin: 0px; padding: 0px; color: rgb(0, 128, 0); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">获得时区分钟偏移基数</span>
            <span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">var</span> munite = timeOffset % 60<span style="margin: 0px; padding: 0px; color: rgb(0, 0, 0); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">;
            </span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">var</span> prefix = "-"<span style="margin: 0px; padding: 0px; color: rgb(0, 0, 0); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">;
            </span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">if</span> (hour < 0 || munite < 0<span style="margin: 0px; padding: 0px; color: rgb(0, 0, 0); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">) {
                prefix </span>= "+"<span style="margin: 0px; padding: 0px; color: rgb(0, 0, 0); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">;
                hour </span>= -<span style="margin: 0px; padding: 0px; color: rgb(0, 0, 0); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">hour;
                </span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">if</span> (munite < 0<span style="margin: 0px; padding: 0px; color: rgb(0, 0, 0); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">) {
                    munite </span>= -<span style="margin: 0px; padding: 0px; color: rgb(0, 0, 0); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">munite;
                }
            }
            hour </span>+= " "<span style="margin: 0px; padding: 0px; color: rgb(0, 0, 0); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">;
            munite </span>+= " "<span style="margin: 0px; padding: 0px; color: rgb(0, 0, 0); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">;           
            </span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">if</span> (hour.length == 2<span style="margin: 0px; padding: 0px; color: rgb(0, 0, 0); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">) {
                hour </span>= "0" +<span style="margin: 0px; padding: 0px; color: rgb(0, 0, 0); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;"> hour;
            }
            </span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">if</span> (munite.length == 2<span style="margin: 0px; padding: 0px; color: rgb(0, 0, 0); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">) {
                munite </span>= "0" +<span style="margin: 0px; padding: 0px; color: rgb(0, 0, 0); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;"> munite;
            }           
            
            </span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;">return</span> prefix + hour +<span style="margin: 0px; padding: 0px; color: rgb(0, 0, 0); line-height: 1.8; font-family: 'Courier New' !important; font-size: 12px !important;"> munite;
        }</span>

</pre><p style="margin: 10px auto; padding: 0px; text-indent: 0px;"> </p><pre class="javascript" style="margin: 0px; padding: 0px; white-space: pre-wrap; -ms-word-wrap: break-word;" name="code">

使用上面方法能很方便的获取时区时间偏移值。

接下来我们应该使用ajax或者页面回发的方式调用服务器端方法。基于情况不同，调用服务器端方法略。

我们的服务器端方法首先会先获得当前的“协调世界（ＵＴＣ）时间”，再同“时区时间偏移值”相加的方式来得到客户端时间。

方法如下：

<span style="margin: 0px; padding: 0px; line-height: 1.8;font-size:14px;">　　</span>

 /// <summary>
        /// 计算客户端所在时区时间
        /// </summary>
        /// <param name="clientTimeOffset">要传入的时区时间偏移值</param>
        /// <returns>客户端时区时间</returns>
        public DateTime GetClientTime(string clientTimeOffset) 
        {
            //获取协调世界时间
            DateTime utcTime = DateTime.UtcNow;
            //按小时，分钟分割时区偏移值
            string[] timeOffset = clientTimeOffset.Split(' ');
            int hourOffset = int.Parse(timeOffset[0]);
            int minuteOffset = int.Parse(timeOffset[1]);
            //协调世界时间与时区小时偏移值相加
            utcTime = utcTime.AddHours(hourOffset);
            //协调世界时间与时区分钟偏移值相加
            utcTime = utcTime.AddMinutes(minuteOffset);
            return utcTime;
        }

通过GetClientTime方法我们能够正确得到客户端所在时区的时间。调用它并返回它就可以放心在客户端应用了。

 

更多WEB开发技术请加群：Asp.Net高级群 号码：261882616  博主以及同事和你共同探讨感兴趣的话题。