1

I need countUP timer from the specific date. (year, month, day, hour, min., sec.,)

For example I need count up timer from date 2012 August 24, and when I refresh the page, timer must still work/count UP.

I found so many counter but every counter is DOWN, not UP.

This timerlook so good http://flipclockjs.com/

but missing count UP from specific date.

Matrinkoo
  • 17
  • 1
  • 3
  • 6

1 Answers1

2

Well, since you've mentioned FlipClock, I guess this should work:

Calculate difference between current date and your desired date:

var date1 = new Date("8/24/2012");
var date2 = new Date();
var timeDiff = Math.abs(date2.getTime() - date1.getTime());
var diffSeconds = Math.ceil(timeDiff / 1000);

Create FlipClock (it counts up by default, to change that set countdown: true):

var clock = $('.your-clock').FlipClock({
    // ... your options here
});

Use setTime() method to set time:

clock.setTime(diffSeconds);

Now just start the clock:

clock.start();

I haven't checked this, but should work according to documentation.

Edit:

Since FlipClock doesn't support nothing beyond 99 days, here is another approach with Countdown.js:

setInterval(function() {
    var timespan = countdown(new Date("08/24/2012"), new Date());
    var div = document.getElementById('time');
    div.innerHTML = "Time difference with 08/24/2012 is " + timespan.years + " years, " + timespan.months + " months, " + timespan.days + " days, " + timespan.hours + " hours, " + timespan.minutes + " minutes, " + timespan.seconds + " seconds."
}, 1000);

See demo.

Ilya Luzyanin
  • 7,910
  • 4
  • 29
  • 49
  • Great! But Flipclock have only DailyCounter, not have month and year. This timer counts only to 99 days. I need change this code var clock = $('.clock').FlipClock({ clockFace: 'DailyCounter', }); But flipclock don't offer option what I need – Matrinkoo Aug 18 '14 at 11:16
  • Well, you need to either create your own face (http://flipclockjs.com/api), or choose another counter that supports years and do the same steps I described (calculating date difference). – Ilya Luzyanin Aug 18 '14 at 11:26
  • ok, I change my requirements. What if I want show only the timeDiff in static number, not live view countUP. I come to the page, and I see how long is it from the date what I set, not count UP, only static number. And then, when I reload the page, script again calculate the difference and show it on the page. – Matrinkoo Aug 18 '14 at 11:37
  • You can do this either using countdown.js: `var timespan = countdown(new Date("08/12/2012"), new Date());`, or using plain javascript: http://stackoverflow.com/a/20669357/2571926 – Ilya Luzyanin Aug 18 '14 at 11:44
  • AWESOME! AWESOME! AWESOME! Thank you so so mutch! thats what I need! :) – Matrinkoo Aug 18 '14 at 11:56
  • You're welcome. Note: you need only `setInterval` part. The script above it is actually this one: https://bitbucket.org/mckamey/countdown.js/raw/tip/countdown.min.js, simply include it as a script link. I couldn't add it to jsfiddle otherwise unfortunately. – Ilya Luzyanin Aug 18 '14 at 11:58