Обратный отсчет с определенной даты с помощью flipclock.js

Ответ 1

Это то, что я использую

<div class="clock"></div>
<script type="text/javascript">
    var date = new Date(2015, 6, 21);
    var now = new Date();
    var diff = (date.getTime()/1000) - (now.getTime()/1000);

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

Месяцы основаны на нуле, поэтому в июле, будучи седьмым месяцем, используется 6.

Ответ 2

@Matt, отличный пример, однако я могу понять, почему "coolshrimp" опубликовал аналогичную формулу, оба они наполовину правильны.

На моем веб-сайте, когда я использую jsfiddle, я хочу, чтобы он также показывал "Часы" "Минуты" и "Секунды", следующий пример отлично работал у меня:

    <script type="text/javascript">
        var date = new Date("February 01, 2016 02:15:00"); //Month Days, Year HH:MM:SS
        var now = new Date();
        var diff = (date.getTime()/1000) - (now.getTime()/1000);

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

Ответ 3

Вы должны сделать это так:

$(document).ready(function(){
    var date = new Date(2014, 7, 21, 0,0,0,0);
    var today = new Date();

    var dif = date.getTime() - today.getTime();

    var timeLeft = Math.abs(dif/1000)/60;


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

    clock.setTime(timeLeft);
    clock.start();   
});

Функция времени немного отключена, поэтому вам придется поэкспериментировать с ней, чтобы она была правильной.

Скрипки: http://jsfiddle.net/Uscg9/4/

Ответ 4

Простой:

<div class="clock"></div>

<script type="text/javascript">
    var clock = $('.clock').FlipClock(new Date("August 15, 2015 03:24:00"),{
    clockFace: 'DailyCounter',
    countdown: true
    });  
</script>

ИЛИ

<div class="clock"></div>

<script type="text/javascript">
    var clock = $('.clock').FlipClock(new Date(2015,8,15),{
    clockFace: 'DailyCounter',
   countdown: true
   });  
</script>

Ответ 5

Я думаю, что использование api-функции Date будет лучше (reference)

$(document).ready(function() {
    // Today date object.
    var today   = new Date();
    today   = today.getTime()/1000;

    // Final date object.
    var finalDate = new Date();

    // Setting year for final date.
    finalDate.setFullYear(2016);

    // Setting month for final date.
    // Month counting starts from 0 i.e. Jan = 0, therefore March = 2.
    finalDate.setMonth(2);

    // Setting Day for final date.
    finalDate.setDate(17);

    // Setting Hours for final date.
    finalDate.setHours(12);

    // Setting Minutes for final date.
    finalDate.setMinutes(00);

    // Setting Seconds for final date.
    finalDate.setSeconds(00);

    var finalDate  = finalDate.getTime()/1000;
    var diff  = finalDate - today;

    $('div#countdown-clock').FlipClock(diff, {
        clockFace: 'HourlyCounter',
        countdown: true
    }); 
});

Ответ 6

Вы должны рассчитать разницу самостоятельно. Смотрите пример для обратного отсчета до нового года: https://github.com/objectivehtml/FlipClock/blob/master/examples/countdown-from-new-years.html

$(document).ready(function() {
    // Grab the current date
    var currentDate = new Date();
    // Set some date in the past. In this case, it always been since Jan 1
    var pastDate  = new Date(currentDate.getFullYear(), 0, 1);
    // Calculate the difference in seconds between the future and current date
    var diff = currentDate.getTime() / 1000 - pastDate.getTime() / 1000;
    // Instantiate a coutdown FlipClock
    clock = $('.clock').FlipClock(diff, {
        clockFace: 'DailyCounter'
    });
);