在 Flipclock.js 倒计时中，即使在浏览器刷新后也隐藏时钟答案

【问题标题】：In flipclock.js countdown, hiding the clock, even after a browser refresh在 Flipclock.js 倒计时中，即使在浏览器刷新后也隐藏时钟
【发布时间】：2017-11-14 21:59:15
【问题描述】：

提前致谢。

我目前有一个开发 PHP 网页，它在页面加载时从其网络服务器获得“实时”时间。该页面中有一个flipclockjs倒计时，它使用服务器的时间作为“当前日期”，与“未来日期”相比，倒计时结束的时间。

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

我的问题是倒计时达到零的时间。我可以使用 Flipclock 的 stop:function 的回调将一个全新的 css 类应用于包含时钟的 div，并在我的样式表中有一个与该新类匹配的样式，它隐藏了时钟 - 例如可见性：隐藏；

但是，如果有人在倒计时结束后访问该页面的 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!');
                                }
                            }

        });
    });

【问题讨论】：

所以添加检查时间是否过去......如果是，请不要运行它。

标签： javascript

【解决方案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!');
            }
            }
        });
    }    
});

【讨论】：