无需重置即可倒计时到特定时区的特定日期

Question

我正在尝试使用 flipclock 创建特定日期的倒计时，而无需重置计时器或不同时区的人看到不同的数字。例如，我想倒计时到 2 月 20 日，12:00am MST。

我的问题是当时钟到达0后刷新浏览器时时钟重置，时间显示负数。如果人们使用当前配置查看此时钟，它会倒计时到他们时区的 2 月 20 日凌晨 12 点。

我已经开始为新年编译时钟倒计时并设置我的日期，但不确定如何解决时区和重置问题。

var clock;

$(document).ready(function() {

    // Grab the current date
    var currentDate = new Date();

    // Set some date in the future. In this case, it's always Jan 1
    var futureDate = new Date(currentDate.getFullYear() + 0, 1, 20, 0, 0);

    // Calculate the difference in seconds between the future and current date
    var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;

    // Instantiate a coutdown FlipClock
    clock = $('.clock').FlipClock(diff, {
        clockFace: 'DailyCounter',
        countdown: true,
        showSeconds: false,
        callbacks: {
            stop: function() {
                $('.message').html('The clock has stopped!');
            }
        }
    });
});

Answer 1

既然你想倒数的时间是特定时区的特定时间，那么最简单的方法就是pre-convert that time to UTC，然后倒数到那个时间。

2016 年 2 月 20 日，美国山区时间为 UTC-7，因此：

2016-02-20 00:00:00 MST == 2016-02-20 07:00:00 UTC

所以，

var currentDate = new Date();
var futureDate = Date.UTC(currentDate.getUTCFullYear(), 1, 20, 7, 0, 0);
var diff = (futureDate - currentDate.getTime()) / 1000;

我会让其他人回答 WRT FlipClock 的细节和您的重置问题 - 尽管您可以考虑在一个单独的问题中提问。（以后尽量一次只问一个问题。）

Answer 2

var clock;

$(document).ready(function() {

  // Grab the current date
  var now = new Date();
  var currentDate = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(),  now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds());
  currentDate.setHours(currentDate.getHours() - 7);

  // Set some date in the future. In this case, it's always Jan 1
  var futureDate = new Date(currentDate.getFullYear() + 0, 1, 20, 0, 0);

  // Calculate the difference in seconds between the future and current date
  var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;

  // Limit time difference to zero
  if (diff < 0) {
    diff = 0;
  }

  // Instantiate a coutdown FlipClock
  clock = $('.clock').FlipClock(diff, {
    clockFace: 'DailyCounter',
    countdown: true,
    showSeconds: false,
    callbacks: {
      stop: function() {
        $('.message').html('The clock has stopped!');
      }
    }
  });
});

部分解决时区问题（有点难看）：

// Grab the current date
var now = new Date();
var currentDate = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(),  now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds());
currentDate.setHours(currentDate.getHours() - 7);

部分限制时差不小于零：

// Limit time difference to zero
if (diff < 0) {
  diff = 0;
}

无需重置即可倒计时到特定时区的特定日期

flipclock countdown to specific date in specific timezone without reset

javascript

datetime

countdowntimer

flipclock