Javascript Flipclock js倒计时1小时,无需重置
我试图在刷新时不重置时间的情况下进行倒计时。我只需要倒计时1小时,但我不希望它在刷新时重置。从服务器获取当前时间和过期时间不起作用,因为我想在单击时重置计时器。以下是我当前的js代码:Javascript Flipclock js倒计时1小时,无需重置,javascript,jquery,countdown,flipclock,Javascript,Jquery,Countdown,Flipclock,我试图在刷新时不重置时间的情况下进行倒计时。我只需要倒计时1小时,但我不希望它在刷新时重置。从服务器获取当前时间和过期时间不起作用,因为我想在单击时重置计时器。以下是我当前的js代码: <script> var clock; clock = $('.clock').FlipClock({ clockFace: 'HourlyCounter', autoStart: false, callbacks: {
<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>
无功时钟;
时钟=$('.clock')。FlipClock({
钟面:“HourlyCounter”,
自动启动:错误,
回调:{
停止:函数(){
$('.message').html('时钟已停止!')
},
}
});
时钟设置时间(3600);
时钟设置倒计时(真);
是的,您可以根据您的示例使用和查看
在flipclock
的init()
函数中将结束日期存储在Cookie中,使用clock.setTime()
初始化计时器,使用clock.setCountdown(true)
启用倒计时,并通过clock.start()
启动计时器
现在如果用户刷新页面,我们将计时器设置为当前日期和结束日期之间的差值,这样计数器可以正常继续倒计时:
var counter = $.cookie('endDate')-currentDate;
clock.setTime(counter);
点击reset
按钮将通过移除cookieendDate
并初始化倒计时功能来重置计数器
HTML:
<div class="clock" style="margin:2em;"></div>
<div class="message"></div>
<button id='reset'>Reset</button>
//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