Search code examples
javascriptjqueryflipclock

Countdown Clock to a Specific Time


I am using FlipClock.js to have a countdown clock till new year day. I want to change this to countdown to 8am local time on the first. I am a bit confused as to how to do this.

Here is the script I am currently using:

var clock;
$(function() {
  var currentDate = new Date();
  var futureDate  = new Date(currentDate.getFullYear() + 1, 0, 1);
  var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
  clock = $('.clock').FlipClock(diff, {
    clockFace: 'DailyCounter',
    countdown: true
  });
});

EDIT

I tried changing my code to this:

var clock;
$(function() {
  var currentDate = new Date();
  var futureDate  = new Date(Date.UTC(2014, 0, 01, 08, 0, 0));
  var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
  clock = $('.clock').FlipClock(diff, {
    clockFace: 'DailyCounter',
    countdown: true
  });
});

This line

var futureDate  = new Date(currentDate.getFullYear() + 1, 0, 1);

was changed to this line:

var futureDate  = new Date(Date.UTC(2014, 0, 01, 08, 0, 0));

When I did this it added one hour to the countdown clock. It should of added more since the time was 12am to 8am. What did I do wrong and how do I correct it?


Solution

  • As Lix said you should modify the futureDate. If you have a problem with that my advice is to read about predefined Date object in Javascript language. Here is a good reference

    One of the valid definition of a Date object is shown below:

    new Date(year, month [, day, hour, minute, second, millisecond]);
    

    After you succesfully found next year (currentDate.getFullYear() + 1) all you have to do is to properly fill the rest of the parameters.

    Beware - in Javascript Date object only a month is counted counterintuitive relative to the rest: 0-11.