Flipclock countdown start from initial after refreshing the browser

Question

I am using the flip clock and I set the countdown which is working but when 'I refresh the page, it starts from initial. For example, I set 25 days yesterday. If I refresh the browser then it should display 24 today but when I refresh the browser then it again starts from 25. Would you help me in this?

Jquery plugin link 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>

Answer 1

I checked on the internet and there was an SO Question answering this. Basically you need to calculate the time difference between the current and future dates and supply it to the function, refer the below code.

Please refer to the link below for the original answer.

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>