2017-08-31 102 views
0

如何防止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> 
+0

不要硬编码这个'clock.setTime(452540.668);' –

回答

0

我认为你应该使用cookie来解决这个问题。

您可以在cookie中设置计时器,并在页面刷新时检查cookie是否设置,获取该计时器值,否则重新启动计时器。

检查此链接到如何使用的cookie:离开,直到午夜Working with Cookies

0

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>

计算秒,并将其设为您的时钟。

0

如果您可以提供从服务器的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(秒)的参数;