CODEWITHSUNDEEP
javascriptflipclock
Parseltongue
Parseltongue

Reputation: 11697

Modify FlipClock so that timer doesn't reset when you refresh the page

I am currently using FlipClock.js to create a countdown timer. However, I noticed that when I refresh the page, the countdown timer resets. I would like to prevent this from happening.

My current code is here:

<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>

Here's a link to a JSFiddle: jsfiddle.net/40re721m/2

What's the best way to go about doing this?

Upvotes: 0

Views: 170

Answers (1)

Mohammad Ali Rony
Mohammad Ali Rony

Reputation: 4915

You need to set own time then calculate differently from current time then set differently in FlipClock countdown 

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>

Upvotes: 1

Related Questions