CODEWITHSUNDEEP
javascriptjqueryflipclock
Amr
Amr

Reputation: 593

Setting FlipClock.js digit to zeros after it stops

I am trying to set the FlipClock.js digits to zeros after is stops, but can't find a way in the documentation to do it.

I want it to display 00:00:00

Here is what I have tried so far:

var datepass = 'August 23, 2018 15:34:30',
	date = new Date(datepass),
	now = new Date(),
	diff = (date.getTime()/1000) - (now.getTime()/1000),
	clock = $('#clock1').FlipClock(diff,{
		clockFace: 'HourlyCounter',
		countdown: true
	});
clock.start();

var timer1 = setInterval(checktime, 1000);

function checktime() {
	t = clock.getTime();
	if ( t <= 0 ){
		clock.stop();
		clearInterval(timer1);
		
		/* set the digits to zeros by jQuery */
		$('#clock1 ul li a div.up div.inn, #clock1 ul li a div.down div.inn').text(0);
		
		/* hide the first and second digits */
		$('#clock1 ul.flip').eq(0).hide();
		$('#clock1 ul.flip').eq(1).hide();
	}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/flipclock.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/flipclock.min.js" integrity="sha256-BiezSH09N4/rvsbi2M+VY0et7UQYP3VjtbdFHo46N1g=" crossorigin="anonymous"></script>

<div class="clock" id="clock1"></div>

Upvotes: 0

Views: 1093

Answers (2)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33943

I just had the exact same issue... And Amr's (OP) comment was my answer:

The problem with the diff is that it was a negative number. A check must be added to set the diff value to 0 if it is less than 0...

Based on his code, the addition is:

var datepass = 'August 23, 2018 15:34:30',
date = new Date(datepass),
now = new Date(),
diff = (date.getTime()/1000) - (now.getTime()/1000);

diff = diff < 0 ? 0 : diff;  // <-------- here

var clock = $('#clock1').FlipClock(diff,{
    clockFace: 'HourlyCounter',
    countdown: true
});

So yes, the timer "naturally" stops at zero when running. But when diff is negative on page load, it is an issue... Simple to fix, fortunately.

With this fix, the only (possibly annoying) thing left is that console log message Trying to start timer when countdown already at 0.

Upvotes: 0

Stock Overflaw
Stock Overflaw

Reputation: 3321

If you're doing a countdown, then - according to the Options section on their homepage(*) - you're not passing the option correctly, it should be:

$('#clock1').FlipClock(diff, {
  clockFace: 'HourlyCounter',
  clockFaceOptions: {
    countdown: true
  }
});

Then it stops naturally at zero.

However you diff is negative, which displays weird stuff and leaves me wondering if I understood what you're trying to do.

(*): which is not reflected on their faces page.

Upvotes: 0

Related Questions