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

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

Answer 3

简单的：

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

你必须这样做：

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

我觉得使用 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
    }); 
});

Answer 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's 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'
    });
);