GMT/UTC 中的 Javascript 倒数计时器

Posted 2023-03-24

【中文标题】GMT/UTC 中的 Javascript 倒数计时器

【英文标题】：Javascript Countdown Timer in GMT/UTC

【发布时间】：2017-03-08 21:27:27

【问题描述】：

我有以下用于倒数计时器的 javascript 代码：

var end = new Date('10/26/2016 4:00 PM');

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;

function showRemaining() 
    var now = new Date();
    var distance = end - now;
    if (distance < 0) 

      clearInterval(timer);
      document.getElementById('countdown').innerhtml = 'EXPIRED!';

      return;
    
    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    document.getElementById('countdown').innerHTML = minutes + 'mins ' + seconds + 'secs';


timer = setInterval(showRemaining, 1000);

这可行，但问题是我需要倒数计时器在 GMT/UTC 时间上工作，因为我在站点/服务器上的所有时间都以这种方式存储。

目前，此倒数计时器正在使用用户本地时间进行now 设置。此脚本将在全球范围内访问，因此我无法使用本地时区，并且必须为 GMT/UTC 格式。

也就是说，截至发帖时，当前的 GMT 时间是 13:17，但如果我在英国访问脚本，则本地时间是 14:17，因此倒计时结束 1 小时。

我知道 javascript 有

toUTCString()

方法但是当我尝试调用它时

function showRemaining() 
    var now = new Date().toUTCString();
    ...

结果如下：

NaNmins NaNsecs

jsfiddle 在这里 => https://jsfiddle.net/pzbz35q1/1/

【问题讨论】：

没有“本地”日期对象，它们都是 UTC。字符串“10/26/2016 4:00 PM”没有时区偏移量，因此如果解析为 Date 将代表具有不同时区偏移量的每个主机的不同时刻。

【参考方案1】：

我之前用过类似下面的东西：

var now = new Date();
var nowUTC = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds());
var distance = end - nowUTC;

.toUTCString() 会将当前 UTC 日期/时间的字符串放入变量中，因此基于它的任何计算都将失败（因为它试图从字符串中计算数字）。

【讨论】：

谢谢。这样可行。就在发布之后，我还发现我可以这样做 var now = new Date(); var gmt = new Date(now.getTime() + now.getTimezoneOffset() * 60000); 这也有效

日期的时间值已经是 UTC，您正在做的是调整 UTC 时间值，以便在应用时区偏移时，它返回与未调整的 UTC 值相同的本地值.您应该首先使用 UTC 方法。

【参考方案2】：

Javascript 日期对象始终是 UTC。传递给构造函数的值和由 get* 方法返回的值可能被视为本地值。

Date 构造函数对“10/26/2016 4:00 PM”的解析完全依赖于实现，结果很可能是无效的日期。如果解析正确，则应将其视为主机系统时区的 2016 年 10 月 26 日 16:00。主机偏移量将用于为该日期和时间创建 UTC 时间值。请注意，对于世界上大多数人来说，使用 mm/dd/yyyy 格式是不明确的，因此应将字符串的格式提供给解析器。

如果您希望将“2016 年 10 月 26 日下午 4:00”视为 UTC，那么您应该这样解析它：

/* Parse string in mm/dd/yyyy hh:mm ap format as UTC.
** '10/26/2016 4:23 PM'
** @param string s - string in required format
** @returns Date - if string is invalid then an invalid Date is returned
*/
function parseAsUTC(s) 
  var b = s.split(/\D/);
  var hr = b[3]%12 + (/pm$/i.test(s)? 12 : 0);
  var d = new Date(Date.UTC(b[2], --b[0], b[1], hr, b[4]))
  return d && d.getUTCMonth() == b[0] && d.getUTCHours() == hr? d : new Date(NaN);


var d = parseAsUTC('10/26/2016 4:23 PM');
console.log('UTC date: ' + d.toISOString() + '\n' +
            'Local equivalent: ' + d.toLocaleString());                 

【讨论】：

很好的Answare和有用的。

【参考方案3】：

如果我错了，请纠正我，但我认为我们可以这样做：

var end = new Date('Oct 26, 2016 04:00:00 GMT+00:00')

或者获取倒数计时器的毫秒数：

var end = new Date('Oct 26, 2016 04:00:00 GMT+00:00').getTime()

getTime() 函数返回自 Unix 纪元以来的毫秒数。

所以，据我所知，这应该可以满足您的需求。您只需要将毫秒转换为秒、分钟、小时、天，就像您正在做的那样。