0

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

Jquery 插件链接http://flipclockjs.com/

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>

4

1 回答 1

0

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

请参阅下面的链接以获取原始答案。

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>

于 2017-09-07T05:16:29.610 回答