首页 > 解决方案 > 停止后将 FlipClock.js 数字设置为零

问题描述

我试图在停止后将 FlipClock.js 数字设置为零,但在文档中找不到这样做的方法。

我希望它显示 00:00:00

这是我到目前为止所尝试的:

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/flipclock@0.8.2/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/flipclock@0.8.2/dist/flipclock.min.js" integrity="sha256-BiezSH09N4/rvsbi2M+VY0et7UQYP3VjtbdFHo46N1g=" crossorigin="anonymous"></script>

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

标签: javascriptjqueryflipclock

解决方案


如果你正在做一个countdown,那么 - 根据他们主页上的选项部分(*) - 你没有正确传递选项,它应该是:

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

然后它自然地停在零处。

但是,您diff是否定的,这会显示奇怪的东西,让我想知道我是否理解您要做什么。

(*):这不会反映在他们的面孔页面上


推荐阅读