0

我正在尝试使用翻转时钟创建特定日期的倒计时，而无需重置计时器或不同时区的人看到不同的数字。例如，我想倒计时到 2 月 20 日上午 12:00 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!');
            }
        }
    });
});
4

2 回答 2

0

由于您要倒计时的时间是特定时区的特定时间，因此最简单的方法是将时间预先转换为 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 的细节和你的重置问题——尽管你可以考虑在一个单独的问题中提出。（以后尽量一次只问一个问题。）

于 2016-02-18T18:34:06.903 回答
0 
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;
}
于 2016-02-18T18:39:47.417 回答