CODEWITHSUNDEEP
javascriptjqueryhtmlcss
PCM
PCM

Reputation: 25

Make FlipClock JS work like a countdown

I can't make FlipClock.js work. I want to, for example, make a 10 days countdown.

I made this fiddle but the flipclock doesn't appear - 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);
});

Upvotes: 1

Views: 9779

Answers (2)

Jeff
Jeff

Reputation: 31

Try getting the current date and compare with the desired date:

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
});

Upvotes: 3

Ben Jones
Ben Jones

Reputation: 2161

Flipclock() takes various options, but you'll need to make it a json array

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

What they don't mention very well is that the first parameter can be the start offset, like so

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

You can find more working example of this in the faces section of the docs - http://flipclockjs.com/faces

Here is a working JSFiddle http://jsfiddle.net/bensjones/swjo7wjt

How I made this work is by using the references section (on the left) rather than putting it in the code areas. This will often confuse the issue and, many times, JSFiddle itself.

Upvotes: 2

Related Questions