CODEWITHSUNDEEP
javascriptjquery
Cajuu'
Cajuu'

Reputation: 1166

FlipClock javascript issue

I am trying to integrate flipclock timer on a webpage, which is going to countdown until tomorrow at 12 PM.

After getting it to work, I want to hide the Days, Hours and Minutes when the timer is less than a days, an hour a minute respectively

FIDDLE

var date  = new Date(Date.UTC(2015, 5, 12, 12, 0, 0, 0));
var now   = new Date();
var diff  = date.getTime()/1000 - now.getTime()/1000;

var clock = $('.clock').FlipClock(diff, {
    clockFace: 'DailyCounter',
    countdown: true
});

What do I need to do

Upvotes: 0

Views: 718

Answers (1)

mplungjan
mplungjan

Reputation: 178350

Like this - note the Date.UTC needs to reflect your 12 o'clock in your timezone - NOTE JS months start at 0 for January

var date = new Date(Date.UTC(2015, 4, 12, 12, 0, 0, 0)), 
    now  = new Date(), 
    diff = date.getTime()/1000 - now.getTime()/1000,
    aDayInSecs=24*60*60, anHourInSecs=60*60, aMinuteInSecs=60;

if (diff<0) diff=200; // remove this line when happy

var clock = $('.clock').FlipClock(diff, {
    clockFace: 'DailyCounter',
    countdown: true,
    callbacks: {
        interval: function () {
            var time = clock.getTime().time;
            if (time < aDayInSecs) {
              var $days = $("span.days").nextUntil("span").andSelf();
              if ($days.length>0) $days.remove();  
            }
            if (time < anHourInSecs) {
              var $hours = $("span.hours").nextUntil("span").andSelf();
              if ($hours.length>0) $hours.remove();  
            }
            if (time < aMinuteInSecs) {
              var $min = $("span.minutes").nextUntil("span").andSelf();
              if ($min.length>0) $min.remove();  
            }
            if (time <= 1) {
              var $sec = $("span.seconds").next("ul").andSelf();
              if ($sec.length>0) $sec.remove(); 
              $(".clock").html("DONE");  
            }
        }
    }    
});
<script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
<script type='text/javascript' src="http://flipclockjs.com/_themes/flipclockjs/js/flipclock/flipclock.js"></script>
<link rel="stylesheet" type="text/css" href="http://flipclockjs.com/_themes/flipclockjs/css/flipclock.css">
    
<br/><div class="clock"></div>

If you ALWAYS need tomorrow at 12, you can do

var date  = new Date();
date.setDate(date.getDate()+1).setHours(12,0,0,0);

Upvotes: 1

Related Questions