防止Flipclock倒计时器停止重启
问题描述:
如何防止Flipclock倒计时器在有人刷新网页时停止重启?防止Flipclock倒计时器停止重启
这个我试过的代码使用
<div class="clock"></div>
<div class="countdownHeader"><span>Sale Ends Midnit</span></div>
<script type="text/javascript">
jQuery(document).ready(function() {
var clock;
clock = jQuery('.clock').FlipClock({
clockFace: 'DailyCounter',
autoStart: false,
showSeconds: false,
callbacks: {
stop: function() {
jQuery('.clock,.countdownHeader').hide();
}
}
});
/*clock.setTime(counter);*/
clock.setTime(452540.668);
clock.setCountdown(true);
clock.start();
});
</script>
答
我认为你应该使用cookie来解决这个问题。
您可以在cookie中设置计时器,并在页面刷新时检查cookie是否设置,获取该计时器值,否则重新启动计时器。
检查此链接到如何使用的cookie:离开,直到午夜Working with Cookies
答
function secsToMidnight() {
var now = new Date();
var then = new Date(now);
then.setHours(24, 0, 0, 0);
return parseInt((then - now) * 60/6e4);
}
var clock = $('.your-clock').FlipClock(secsToMidnight(),{
countdown: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css" rel="stylesheet"/>
<br>
<div class="your-clock"></div>
计算秒,并将其设为您的时钟。
答
如果您可以提供从服务器的D2串(或硬编码,我想,如果你一定要):
// Date to
var d2 = new Date('2017-09-01 00:00:00');
// Date now on client
var d1 = new Date($.now());
// Subtract one from the other
var seconds = (d2 - d1)/1000;
// Dates and seconds to go
console.log('seconds: ' + seconds + ' => d2: ' + d2 + ' => d1: ' + d1);
那么这会给你clock.setTime(秒)的参数;
不要硬编码这个'clock.setTime(452540.668);' –