Question

我正在尝试使用flipclock在没有计时器重置的情况下创建特定日期的倒计时，或者在不同时区看到不同数字的人。例如，我想倒计时到2月20日，美国中部标准时间凌晨00点。

我的问题是，当浏览器达到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倒计时到特定时区的特定日期而不重置

2 个答案: