2015-05-11 3 views
0

Я пытаюсь интегрировать таймер flipclock на веб-страницу, которая будет отсчет времени до завтра в 12 часов.Проблема с javascript FlipClock

После того, как это работает, я хочу, чтобы скрыть дни, часы и минуты, когда таймер меньше, чем дней, через час в минуту соответственно

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 
}); 

Что мне нужно сделать сделать

+2

Плагин называется 'FlipClock', пока вы звоните' FlipClip'. См. Примеры базовой информации об установке: http://flipclockjs.com/#basic-example. Вы уверены, что в консоли нет ошибок? –

+0

Что вы видите на этой странице? вы можете создать скрипку своей страницы? –

+0

Я ничего не вижу. Конечно. Сейчас я отредактирую. –

ответ

1

Как это - обратите внимание, что Date.UTC должен отражать ваши 12 часов в вашем часовом поясе - Примечание JS месяцы начинаются с 0 за январь

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>

Если вы ВСЕГДА нужно завтра в 12 часов, вы можете сделать

var date = new Date(); 
date.setDate(date.getDate()+1).setHours(12,0,0,0); 
Смежные вопросы