Измените FlipClock, чтобы таймер не сбрасывался при обновлении страницы sh - PullRequest
Новая
       33

Измените FlipClock, чтобы таймер не сбрасывался при обновлении страницы sh

0 голосов
/ 21 января 2020

В настоящее время я использую FlipClock. js для создания таймера обратного отсчета. Однако я заметил, что когда я обновляю sh страницу, таймер обратного отсчета сбрасывается. Я хотел бы предотвратить это.

Мой текущий код здесь: 

<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

Как лучше всего go о делая это?

1 Ответ

1 голос
/ 21 января 2020

Вам нужно установить собственное время, затем рассчитать иначе, чем текущее время, а затем установить по-другому в обратном отсчете 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>
...