我目前正在通过图书馆使用具体的倒数计时器-flipclockjs
。现在,在使用间隔时,我可以使其正常工作并倒计时,但是在尝试使用setDate
等时,我一直失败,并且根本无法工作。
如果这是一个nooby问题,对于这些事情还是相对较新的,我深表歉意。非常感谢您的帮助!
这是我的代码:
<html>
<head>
<link rel="stylesheet" href="../compiled/flipclock.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../compiled/flipclock.js"></script>
</head>
<body>
<div class="clock" style="margin:2em;"></div>
<div class="message"></div>
<script type="text/javascript">
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(220880);
clock.setCountdown(true);
clock.start();
});
</script>
</body>
答案 0 :(得分:1)
您可以启动一个日期,然后获取与该日期和当前日期的秒数差,然后启动FlipClock并传递diff值。
var clock = $('.clock').FlipClock( diff ,{...});
$(document).ready(function() {
var d = new Date();
d.setDate(d.getDate()+2);
var curd = new Date();
var diff = (d.getTime() - curd.getTime()) / 1000; //divide by 1000 to transform miliseconds in seconds
var clock = $('.clock').FlipClock(diff,{
clockFace: 'DailyCounter',
autoStart: true,
countdown: true,
callbacks: {
stop: function() {
$('.message').html('The clock has stopped!')
}
}
});
});
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.js"></script>
</head>
<body>
<div class="clock" style="margin:2em;"></div>
<div class="message"></div>
</body>