Search code examples
javascriptjqueryflipclock

Javascript countdown for specific time and date

I am using a jQuery plugin to put the countdown timer in my webpage. Currently the code that controls what the timer displays is:

<script type="text/javascript">
    var clock = $('.clock').FlipClock(3600 * 24 * 3, {
        clockFace: 'DailyCounter',
        countdown: true
    });
</script>


The JS for the plugin can be viewed here: https://github.com/objectivehtml/FlipClock/blob/master/js/flipclock/flipclock.js

The example page of the code in use can be seen here: http://flipclockjs.com/faces/daily-counter

Currently the timer is a countdown for 3 days which resets everytime the page is refreshed. I want to use a custom time for the countdown timer which will be absolute(wont reset with page refresh). I want the date to be September 30, 2013 at 12:00pm PST (US West - California Time Zone).

Is there anyway to do this using Javascript or jQuery?

Solution

  • Get the current time, and note that this will be the time set on the users computer clock, whatever that is set to, and set a certain date, then calculate the difference and use that for the plugin:

    var date  = new Date(Date.UTC(2013, 8, 30, 12, 0, 0));
var now   = new Date();
var diff  = date.getTime()/1000 - now.getTime()/1000;

var clock = $('.clock').FlipClock(diff, {
    clockFace: 'DailyCounter',
    countdown: true
});

    For accurate times I would reccoment using your webserver to output the current time.