Flipclock js倒计时1小时不重置答案

【问题标题】：Flipclock js countdown 1hour without resetFlipclock js倒计时1小时不重置
【发布时间】：2015-07-28 08:22:55
【问题描述】：

我正在尝试在不重置刷新时间的情况下进行倒计时。我只需要倒计时 1 小时，但我不希望它在刷新时重置。从服务器获取当前时间和到期时间不起作用，因为我想通过单击重置该计时器。这是我当前的js代码：

<script>
    var clock;


    clock = $('.clock').FlipClock({
        clockFace: 'HourlyCounter',
        autoStart: false,
        callbacks: {
            stop: function() {
                $('.message').html('The clock has stopped!')
            },
        }
    });   
    clock.setTime(3600);
    clock.setCountdown(true);
</script>

【问题讨论】：

标签： javascript jquery countdown flipclock

【解决方案1】：

是的，您可以根据您的示例使用 flipclock 和 jquery-cookie 进行操作，看看 1 minute countdown Example。

在flipclock 的init() 函数中将结束日期存储在cookie 中，使用clock.setTime() 启动计时器，使用clock.setCountdown(true) 启用倒计时并通过clock.start() 启动它。

现在如果用户刷新页面，我们设置了当前和结束日期之间的时间差，所以像这个计数器可以正常继续倒计时：

var counter = $.cookie('endDate')-currentDate;
clock.setTime(counter);

单击reset 按钮将通过删除cookie endDate 并初始化倒计时功能来重置计数器。

HTML：

<div class="clock" style="margin:2em;"></div>
<div class="message"></div>
<button id='reset'>Reset</button>

Js：

//ready function
$(function(){

    countDown = function(){
        var currentDate = Math.round(new Date() / 1000);

        var clock = $('.clock').FlipClock({
            countdown: true,
            callbacks: {
                init: function() {
                    //store end date If it's not yet in cookies
                    if(!$.cookie('endDate')){
                        // end date = current date + 1 minutes
                        var endDate = Date.now() + 1*60*1000; 

                        // store end date in cookies
                        $.cookie('endDate', Math.round(endDate / 1000)); 
                    }
                },
                stop: function() {
                    $('.message').html('The clock has stopped!');
                },
            }
        });

        /* counter will be at first 1 min if the user refresh the page the counter will 
           be the difference between current and end Date, so like this counter can 
           continue the countdown normally in case of refresh. */
        var counter = $.cookie('endDate')-currentDate;

        clock.setTime(counter);
        clock.setCountdown(true);

        clock.start();
    }

    //reset button
    $('#reset').click(function(){
        $.removeCookie('endDate'); //removing end date from cookies
        countDown(); //launch countdown function
    });

    //Lanching count down on ready
    countDown();
});

在您的情况下（1 小时），您只需将此行中的 1 替换为 60 即可：

var endDate = Date.now() + 1*60*1000; // For you .... + 60*60*1000

【讨论】：