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?
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With