在flipclock.js倒计时中，即使在浏览器刷新后也可以隐藏时钟

Question

提前感谢。

我目前有一个开发PHP的网页，它在页面加载时从web服务器获得"实时"时间。页面中有一个flipclockjs倒计时，它使用服务器的时间作为"当前日期"，而不是倒计时结束的"未来日期"。

到目前为止一切都很好。无论是在英国、美国还是澳大利亚浏览页面，倒计时都将在全球同一格林尼治标准时间结束。

我的问题是倒计时何时为零。我可以使用flipclock's stop:函数的回调将一个全新的css类应用于容纳时钟的div，并在我的样式表中具有与该新类匹配的样式，以隐藏时钟-例如visibility:hidden；

但如果有人在倒计时结束后访问页面的URL，或者在倒计时终止后刷新浏览器页面，我的问题就会出现。每个实例似乎都绕过了时钟停止的实际操作，因此类没有被应用，时钟也没有被隐藏。

我只剩下一个可见的时钟，上面显示着看似随机的负数。

var clock;
$(document).ready(function() {
// Grab the current date
var currentDate = new Date('<? print date("F d, Y H:i:s", time())?>');
// Set some date in the future.
var futureDate  = new Date("November 09, 2017 14:20:00");
// 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: 'HourCounter',
countdown: true,
callbacks: {
stop: function() {
$('.clock').addClass("hideCountdown");
$('.message').html('Our First Offer Has Ended!');
}
}
});
});

Answer 1

只需添加一个检查diff <= 0是否仅根据该条件运行倒计时。这是一个展示功能的Fiddle。

var clock, clock2;
$(document).ready(function () {
// Grab the current date
var currentDate = new Date();
// Set some date in the future.
var futureDate = new Date(); 
futureDate.setSeconds(futureDate.getSeconds() - 10);
// Calculate the difference in seconds between the future and current date
var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
if (diff <= 0) {
$('.message').html('Our First Offer Has Ended!');   
} else {
// Instantiate a coutdown FlipClock
clock = $('.clock').FlipClock(diff, {
clockFace: 'HourCounter',
countdown: true,
callbacks: {
stop: function() {
$('.clock').addClass("hideCountdown");
$('.message').html('Our First Offer Has Ended!');
}
}
});
}    
});