My flipclock goes too fast, and jumps over even numbers. How can I fix this?

Question

My flipclock.js goes too fast and jumps over the even numbers.

I have experimented with the code, and it seems like something go wrong when i use the callbacks-function.

var clock = $('#clock3').FlipClock(new Date("April 10, 2019 18:37:00"), {
  clockFace: 'DailyCounter',
  countdown: true,
  callbacks: {
    stop: function () {
      $("#myButton3Show").hide();
      $("#myButton3Hide").show();
    }
  }
});

<div class="endgame2">
  <img src="Pictures/endgame.png">
     <div id="clock3"></div>
         <a href="https://www.myvue.com/film/avengers-endgame" target="_blank" id="myButton3Show">About Movie</a>
         <a href="https://www.myvue.com/film/avengers-endgame" target="_blank" id="myButton3Hide" style ="display: none">Buy Ticket on Vue</a>
</div>

What I am trying to do is to change the "About Movie"-button to "Book Ticket on Vue" when the countdown has reached 0 and the movie is out on the cinema.

It works, except that the clock goes too fast and jumps over the even numbers.

Answer 1

It looks like this is a known bug which should be fixed in the most recent versions.

You can try the following work-around if switching to a newer version is not possible:

var next_show = new Date('2019-04-10T00:00:00');
var diff = next_show.getTime() - new Date().getTime();

var showtime = Math.floor(diff/1000);
var clock = $('#clock3').FlipClock({
    clockFace: 'DailyCounter',
    countdown: true,
    callbacks: {
      stop: function () {
        $("#myButton3Show").hide();
        $("#myButton3Hide").show();
      }
    }
});

clock.setTime(showtime);
clock.start();