让FlipClock JS像倒计时一样工作

Make FlipClock JS work like a countdown

本文关键字：一样 工作 FlipClock JS 倒计时      更新时间：2023-09-26

我不能使FlipClock.js工作。例如，我想做一个10天的倒计时。

我做了这个小提琴，但flipclock没有出现- http://jsfiddle.net/9hYef/

Html: 

<html>
    <head>
        <link rel="stylesheet" href="/assets/css/flipclock.css">
    </head>
    <body>
        <div class="your-clock"></div>
        <script src="/assets/js/libs/jquery.js"></script>
        <script src="/assets/js/flipclock/flipclock.min.js"></script>
    </body>
</html>
JavaScript: 

var clock = $('.your-clock').FlipClock({
    clock.setCountdown(true);
    clock.setTime(3600);
    clock.setCountdown(true);
});

尝试获取当前日期并与所需日期进行比较:

var huh  = new Date(Date.UTC(2014, 9, 17, 5, 15, 0));
var duh  = new Date();
var wha  = huh.getTime()/1000 - duh.getTime()/1000;
var clock = $('.clock').FlipClip(wha, { // <-- DID YOU MEAN FlipClock
    clockFace: 'DailyCounter',
    countdown: true
});

Flipclock()接受各种选项，但您需要将其设置为json数组

var clock = $('.clock').FlipClock({
    countdown: true
});

他们没有很好地提到的是，第一个参数可以是开始偏移量，就像这样

var clock = $('.clock').FlipClock(3600*24*10, {
    countdown: true
});

您可以在文档的faces部分找到更多的工作示例- http://flipclockjs.com/faces

这是一个工作的JSFiddle http://jsfiddle.net/bensjones/swjo7wjt

我是如何做到这一点的，是通过使用引用部分(在左边)，而不是把它放在代码区。这通常会混淆问题，并且很多时候会混淆JSFiddle本身。

相关文章：