You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何设置JS/jQuery倒计时实现全球各地区本地午夜到期?

问题解析与解决方案

一、当前设置的问题:是否全球统一到期?

你的疑问完全正确——如果浏览器把new Date("15 Jan 2019, 23:59:59")解析为UTC时间,那全球所有用户都会在同一UTC时间到期,对应不同时区的本地时间自然不一样(比如欧洲午夜时,澳大利亚可能才当天21点)。

就算浏览器把这个字符串解析为用户本地时间,这也不是你想要的“本地午夜到期”——因为你写死了1月15日,比如一个在1月16日打开页面的澳大利亚用户,这个时间已经过去了,倒计时会直接结束,而非指向他们的当地午夜。

二、如何实现“每个地区本地午夜到期”?

核心思路是动态生成用户本地时区的午夜时间,而非写死固定日期字符串。这里分两种常见场景:

场景1:指向特定日期的本地午夜(比如2019年1月15日的本地23:59:59)

直接用Date构造函数的参数形式,明确设置本地时间的年、月、日、时、分、秒(注意:月份是从0开始的,1月对应0):

// 目标日期:2019年1月15日 本地时间23:59:59
var bigDay = new Date(2019, 0, 15, 23, 59, 59);

这个方法会自动根据用户的本地时区生成对应时间戳,每个时区的用户看到的到期时间都是他们当地的1月15日午夜。

场景2:指向最近的本地午夜(比如今天/明天的午夜)

如果需要倒计时到用户打开页面时的最近一次本地午夜,可以这么写:

var now = new Date();
// 先创建今天的23:59:59(本地时间)
var bigDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);

// 如果当前时间已经过了今天的午夜,就把目标设为明天的午夜
if (now > bigDay) {
  bigDay.setDate(bigDay.getDate() + 1);
}

这样不管用户什么时候打开页面,都会指向离他们最近的那个本地午夜。

三、关于UNIX时间的补充

你提到的UNIX时间(时间戳)其实是Date对象内部的存储方式——它是从1970年1月1日UTC开始计算的毫秒数。上面的代码生成的每个bigDay,在不同时区的用户设备上对应的UNIX时间戳是不一样的,这正是我们需要的:因为不同时区的本地午夜,本质上是不同的UTC时间点,对应不同的时间戳。

比如,欧洲巴黎的1月15日23:59:59,和澳大利亚悉尼的1月15日23:59:59,对应的UTC时间差了10小时左右,所以它们的UNIX时间戳也差了1036001000毫秒,这样每个用户的倒计时就会在自己的本地午夜到期。

内容的提问来源于stack exchange,提问作者Johny

火山引擎 最新活动