Javascript countdown for specific time and date

Question

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?

Answer 1

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.

Answer 2

I'd do it that way:

<script type="text/javascript">
    var clock = $('.clock').FlipClock(new Date(2013,8,30).getTime()/1000 - new Date().getTime()/1000, {
        clockFace: 'DailyCounter',
        countdown: true
    });
</script>

This counts down till the date Sept, 30 2013... I didn't try it yet so I'm not sure it's working.

Edit: Corrected the date to be new Date(2013,8,30) instead of new Date(2013,9,30) as the month counting starts from 0 not 1.

Answer 3

I'm asssuming the first arg of .FlipClip() is the amount of time until the countdown completes. This time, "t", should be the difference between now and the target time.

var t = targetTimeInMs - currentTimeInMs;

To get the current time, use the no-arg Date constructor.

var currentTimeInMs = new Date().getTime();

To get the target time, supply Date with arguments. Here are a few examples from MDN:

var today = new Date();
var birthday = new Date("December 17, 1995 03:24:00");
var birthday = new Date(1995,11,17);
var birthday = new Date(1995,11,17,3,24,0);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

I'm not exactly sure if you need to supply milliseconds as the first arg to your .FlipClip() function. Consult the documentation/source for that. Then use the appropriate method of the Date object to get the required unit (seconds? minutes? hours? and use date.getSeconds(), getHours(), etc, see MDN.)