Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 873
Alex Zahir Avatar asked Aug 25 '13 21:08

Alex Zahir


2 Answers

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.

like image 114
adeneo Avatar answered Sep 21 '22 11:09

adeneo


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.

like image 32
Ahmed Fathy Avatar answered Sep 20 '22 11:09

Ahmed Fathy