0

我目前正在使用 FlipClock.js 创建倒数计时器。但是，我注意到当我刷新页面时，倒数计时器会重置。我想防止这种情况发生。

我当前的代码在这里：

<html>
  <head>
    <script
    src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css">
  </head>
    <body>
      <div class="clock"></div>
      <div class="message"></div>

      <script>
        var clock = $('.clock').FlipClock(2, {
          countdown: true,
          minimumDigits: 2,
            callbacks: {
            stop:function() {
              $('.message').html('The clock has stopped!');
            }
          }
        });
      </script> 
    </body>
</html>

这是一个 JSFiddle 的链接：jsfiddle.net/40re721m/2

这样做的最佳方法是什么？

4

1 回答 1

1

您需要设置自己的时间，然后以不同于当前时间的方式计算，然后在 FlipClock 倒计时中设置不同的时间

var date = new Date(2020, 0, 23);
var now = new Date();
var diff = (date.getTime()/1000) - (now.getTime()/1000);

var clock = new FlipClock($('.your-clock'), diff, {
	countdown: true,
  callbacks: {
    stop: function() {
      $(".your-message").append("finished");
    },
  }
});

clock();
<html>
	<head>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css">
    		<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>
	</head>
	<body>
		<div class="your-clock"></div>
		<div class="your-message">
   
    </div>
    

	</body>
</html>

于 2020-01-21T18:50:41.770 回答