Flipclock js倒计时1小时不复位

我正在尝试倒计时而不重置刷新时间。 我只需要倒计时1h，但我不希望它在刷新时重置。 从服务器获取当前时间和到期时间不起作用，因为我想在点击时重置该计时器。 这是我目前的js代码：

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

Answer 1

是的你可以在你的例子中使用flipclock和jquery-cookie来看看1分钟的倒计时示例 。

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

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

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

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

HTML：

 
 
 Reset 

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