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:

Answer 1

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.)

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

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.