Question

提前感谢。

我目前有一个开发PHP网页，它获得了＃34; live＆＃34;页面加载时来自其Web服务器的时间。该页面内有一个flipclockjs倒计时，它使用服务器的时间，因为它的当前日期＆＃34;与未来日期＆＃34;相比较当倒计时结束时。

到目前为止一切顺利。无论是浏览英国，美国还是澳大利亚的网页，倒计时都将在全球同一时间内完成。

我的问题是倒计时到零时。我可以使用flipclock的stop回调功能：将一个全新的css类应用到装有时钟的div中，并在我的样式表中设置一个匹配新类的样式，这样可以隐藏时钟 - 例如可见性：隐藏;

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

我留下了一个可见的时钟，显示看似随机的负数。

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!');
            }
            }
        });
    }    
});

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

1 个答案: