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?

you have rights to write php code? – Rameez SOOMRO Aug 25 '13 at 22:13 — Rameez SOOMRO, Aug 25 '13 at 22:13

score 15 · Accepted Answer · edited May 11 '15 at 09:53

15

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.

edited May 11 '15 at 09:53

Rory McCrossan

331,213
40
305
339

answered Aug 25 '13 at 22:08

adeneo

312,895
29
395
388

And what does the typeError say ? – adeneo Aug 25 '13 at 22:16
I should probably note that the plugin you're linking to is called ***FlipClock*** and not ***FlipClip*** ? – adeneo Aug 25 '13 at 22:18
yes it is flipclock not flipclip, but unfortunately that doesnt work either as seen on http://www.domainandseo.com/26/index.html.... the normal version is http://www.domainandseo.com/26/index1.html – Alex Zahir Aug 25 '13 at 23:49
@AlexZahir - But on that page there is no `.clock` element, it's called `.countdown` ? – adeneo Aug 26 '13 at 01:37
yes you are right. implemented your code on http://www.domainandseo.com/26/index.html... with the 35 days there is '420' ?.. I mean days have 5 numbers whereas it should have only 2 – Alex Zahir Aug 26 '13 at 01:53
@AlexZahir - It's because it doesn't accept millliseconds, but seconds, edited the answer! – adeneo Aug 26 '13 at 09:04
Thanks a lot adeno... thanks for sticking by me throughout all this.. chose your answer as the accepted answer. :) – Alex Zahir Aug 26 '13 at 18:30
@Adeneo Can you provide a fiddle for this? I dont know if there's a bug in the Plugin,but the DailCounter Clockface aint working for me. No errors either. – Nevin Madhukar K May 28 '14 at 08:45
add another parameter for milliseconds - e.g. `var date = new Date(Date.UTC(2013, 8, 30, 12, 0, 0, 0));` – Ed Williams Mar 10 '15 at 11:17

score 9 · Answer 2 · edited May 11 '15 at 09:54

9

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.

edited May 11 '15 at 09:54

mplungjan

169,008
28
173
236

answered Aug 25 '13 at 22:12

Ahmed Fathy

529
4
20

this is good, but this actually says "64 days left" but until 30th september there shuould be about '35 days left.' So I'm thinking something should be wrong? – Alex Zahir Aug 26 '13 at 00:04
Yes, you're right. It should be new Date(2013,8,30). Put the month you want - 1 as the counting of months start from 0 not 1. It is probably because it counts the difference from a certain date where the month is January so if you want to represent January, you have to use 0. To represent September, you have to use 8. I've edited the answer to be the correct one now. – Ahmed Fathy Aug 26 '13 at 04:51
oh yeah, thanks a lot. I gave ur answer a plus one, but the other answer got the selected answer cuz it also set the default timezone to UTC as requested in the question. Thanks again :) – Alex Zahir Aug 26 '13 at 18:29

score 0 · Answer 3 · answered Aug 25 '13 at 22:18

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

Javascript countdown for specific time and date

3 Answers3

Linked