Question

当有人刷新网页时，如何防止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>

Answer 1

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

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

点击此链接以了解如何使用Cookie：Working with Cookies

Answer 2

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>

计算秒到深夜并将其设置为你的时钟。

Answer 3

如果您可以从服务器提供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（seconds）;

的参数

防止Flipclock倒计时器停止重启

3 个答案: