如何让Flipclock从特定日期自动设置时间

时间:2019-04-25 15:07:48

标签: javascript css flipclock

所以我已经设置了Flipclock,它可以正常工作,但是我不想要它

这是代码:

CREATE EVENT IF NOT EXISTS `update_status_event`
ON SCHEDULE
    EVERY 19 DAY_HOUR
    COMMENT 'Update the status every days at 19:00'
    DO
        UPDATE `order`
        SET `order`.`status` = 'complete'
        WHERE `order`.`status` <> 'complete'
        AND TIMESTAMPDIFF('DAY', `order`.`date`, now()) >= 3;

我正在尝试设置倒计时,但是每次输入日期,小时,分钟和秒时,它都不会自动更新。如果我以示例方式编辑我的代码,它将被重置,而这是不应该的。

如果我将示例设置为10月1日,那么它应该会自动在此之后出现。

有人知道该怎么做吗?抱歉,我很难解释这个问题。希望你能理解!

1 个答案:

答案 0 :(得分:0)

由于FlipClock.js以秒数为参数,因此以您希望倒计时结束的日期为new Date('October 1 2019)并从当前日期new Date()中减去该日期为准。在他们的different clock faces示例中,包括clockFace: 'DailyCounter'选项和showSeconds: false以使其更加简洁。

const seconds = (new Date('October 1 2019').getTime() - new Date().getTime()) / 1000
if (seconds > 0) {
  new FlipClock($('.your-clock'), seconds, {
    countdown: true,
    clockFace: 'DailyCounter',
    showSeconds: false
  });
} else { 
  $('.your-clock').text("It's October 1st!");
}
<br/>
<div class="your-clock"></div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css">
<script src="https://code.jquery.com/jquery-3.4.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>