使用flipclock.js从一个特定的日期开始倒数

Count down from a particular date using flipclock.js

本文关键字：日期 倒数 开始 一个 js flipclock 使用      更新时间：2023-09-26

我使用http://flipclockjs.com/

这是目前为止我的调用脚本，

<script type="text/javascript">
var clock = $('.clock').FlipClock(3600 * 24 * 5, {
    clockFace: 'DailyCounter',
    countdown: true,
});
</script>
谁能告诉我怎么从一个确切的日期开始倒数?

例如，日期是英国时间2014年7月21日，每个访问该网站的人都会根据当前日期看到距离该日期还有多长时间。

我就是这么用的

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

Months是从零开始的，所以July作为第七个月，使用6。

@Matt，很好的例子，但是我可以理解为什么"coolshrimp"发布了一个类似的公式，两个都是一半正确的。

在我的网站中，当我使用jsfiddle时，我希望它也显示"小时"分钟"answers"秒"，下面的例子对我来说工作得很好:

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

Simple:

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

你必须这样做:

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

我认为使用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
    }); 
});

您需要自己计算差异。请看新年倒计时的例子: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'
    });
);
相关文章：