CODEWITHSUNDEEP
javascriptjqueryflipclock
Mark Gerryl Mirandilla
Mark Gerryl Mirandilla

Reputation: 823

FlipClock reset countdown

I'm working on a simple countdown timer from 1:00 minute to 0 using FlipClock.js, my problem is, it doesn't count until 0, then when it resets, it starts in 00:59 which it should be 1:00. I dont know why but after 00:59 it becomes 00:00 then 00:58.

I tried using setTime() but didn't work.

I hope you understand me.

Thanks

CODEPEN

JS

var clock = $('.my-clock').FlipClock(60, {
  countdown: true,
  callbacks: {
    stop: function() {    
      clock.reset();
      clock.start();    
    }
  }
});

Upvotes: 0

Views: 2024

Answers (1)

PraveenKumar
PraveenKumar

Reputation: 1861

Hope this helps you.

var clock;

$(document).ready(function() {
  clock = $('.my-clock').FlipClock(60, {
    countdown: true,
    callbacks: {
      stop: function() {
        setTimeout(function(){
            clock.reset();
            clock.setTime(60);
            clock.start();
        },1000)
      }
    }
  });
});


var clock;
		
$(document).ready(function() {
  clock = $('.my-clock').FlipClock(10, {
    countdown: true,
    callbacks: {
      stop: function() {
        setTimeout(function(){
            clock.reset();
            clock.setTime(10);
            clock.start();
        },1000)
      }
    }
  });
});
.my-clock {
  text-align:center;
  width:auto;
  display: inline-block;
}
.center {
  text-align:center;
  
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>
hey
<div class="center">
  <div class="my-clock"></div>
</div>

Upvotes: 2

Related Questions