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