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

标签 javascript css flipclock

所以我已经设置了 Flipclock,它可以正常工作,但没有按我希望的方式工作

这是代码:

endtimeYear: 0,
        endtimeMonth: 0,
        endtimeDate: 0,
        endtimeHours: 0,
        endtimeMinutes: 0,
        endtimeSeconds: 0,

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

如果我将其设置为 10 月 1 日,它应该会自动在该日期之后进行。

谁知道怎么做?抱歉,我很难解释这个问题。希望您能理解!

最佳答案

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>

关于javascript - 如何让 Flipclock 从特定日期自动设置时间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55852465/

相关文章:

javascript - 如何调整 Azure Maps 以获得正确的位置?

javascript - jQuery:是否可以将 DOM 元素分配给变量供以后使用?

javascript - 单击“确定”后,从自定义确认框中返回 true

javascript - 带有 XML 调用的 CORS 发布索引文件

html - CSS: 可以 object-fit:cover,有一个起始位置

javascript - 在按钮拖动上拖动父 div

javascript - 如何从前一个元素的 NodeList 中获取所有类名?

javascript - 在 Flipclock 插件中设置自定义时间

javascript - 在 flipclock.js 上动态更改语言

javascript - 重复的翻转时钟