javascript - Flipclock.js を使用して特定の日付からカウントダウンする

Question

http://flipclockjs.com/を使用しています

これまでのところ、これは私の呼び出しスクリプトです。

<script type="text/javascript">
var clock = $('.clock').FlipClock(3600 * 24 * 5, {
    clockFace: 'DailyCounter',
    countdown: true,
});
</script>

正確な日付からカウントダウンする方法を教えてください。

たとえば、日付は英国時間で 2014 年 7 月 21 日であり、そのサイトにアクセスするすべてのユーザーは、現在の日付に基づいてその日付までの残り時間を確認できます。

Answer 1

単純：

<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>

Answer 2

次のように何らかの方法で行う必要があります。

$(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/

Answer 3

Date の api 関数を使った方が良いと思います（参考）

$(document).ready(function() {
    // Today's 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
    }); 
});