刷新浏览器后，Flipclock 倒计时从初始开始

Question

我正在使用翻转时钟，我设置了倒计时，但当我刷新页面时，它从初始开始。比如我昨天定了25天。如果我刷新浏览器那么它今天应该显示 24，但是当我刷新浏览器然后它又从 25 开始。你愿意帮我吗？

var clock;
 
 $(document).ready(function() {
  var clock;
  clock = $('.clock').FlipClock({
         clockFace: 'DailyCounter',
         autoStart: false,
         callbacks: {
          stop: function() {
           $('.message').html('The clock has stopped!')
          }
         }
     });
       
     clock.setTime(2.16e+6);
     clock.setCountdown(true);
     clock.start();

 });

<link href="http://flipclockjs.com/_themes/flipclockjs/css/flipclock.css" rel="stylesheet"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://flipclockjs.com/_themes/flipclockjs/js/flipclock/flipclock.js"></script>


  <div class="clock" style="margin:2em;"></div>
  <div class="message"></div>

Answer 1

我在网上查了一下，有一个 SO Question 回答了这个问题。基本上你需要计算当前日期和未来日期之间的时差并将其提供给函数，参考下面的代码。

原答案请参考下方link

SO Answer

var clock;

$(document).ready(function() {
  var clock;
  clock = $('.clock').FlipClock({
    clockFace: 'DailyCounter',
    autoStart: false,
    callbacks: {
      stop: function() {
        $('.message').html('The clock has stopped!')
      }
    }
  });
  var future = new Date(Date.UTC(2017, 10, 17, 5, 15, 0));
  var current = new Date();
  var difference = future.getTime() / 1000 - current.getTime() / 1000;
  clock.setTime(difference);
  clock.setCountdown(true);
  clock.start();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>


<div class="clock" style="margin:2em;"></div>
<div class="message"></div>

刷新浏览器后，Flipclock 倒计时从初始开始

Flipclock countdown start from initial after refreshing the browser

javascript

jquery

flipclock