jquery.final-countdown.js - 需要帮助配置它

时间:2015-03-04 05:58:55

标签: javascript jquery jquery-plugins countdown jquery-countdown

这里有关于配置(以及如何使用)此插件的说明: http://www.jqueryscript.net/time-clock/Modern-Circular-jQuery-Countdown-Timer-Plugin-Final-Countdown.html

  

初始化倒数计时器并在javascript中设置开始时间,结束时间和当前时间。

      $(' .countdown&#39)。final_countdown({   开始:' 1362139200',   结束:' 1388461320',   现在:' 1387461319' });   

首先,我不知道这些数字是什么意思......它甚至没有解释过。我推断他们的意思是秒。

所以我这样设置我的代码:

    $('.countdown').final_countdown({
    'start':    0, /* ((((Jan + Feb + 3 days) * number of hours in a day) * number of minutes in an hour) * number of seconds in a minute) = total seconds */
    'end':      ((((31+28+31+2)*24)*60)*60), /* started at 9:25 pm on March 03 */
    'now':      ((((31+28+3)*24)*60)*60),
    seconds: {
        borderColor: '#8ef58e',
        borderWidth: '9'
    },
    minutes: {
        borderColor: '#ff8d72',
        borderWidth: '9'
    },
    hours: {
        borderColor: '#69ccff',
        borderWidth: '9'
    },
    days: {
        borderColor: '#ffd35c',
        borderWidth: '9'
    }
});

问题是,每次加载页面时,它都显示相同的29天。该脚本不会抓取当前时间/日期并与将来的其他时间/日期进行比较。

所以它现在看起来没问题(29天),但是从现在开始几天有人会加载这个页面,它将完全关闭。

您可以在此处查看脚本(和问题): http://www.3rd-dimension.co

我非常感谢你提供任何帮助。

2 个答案:

答案 0 :(得分:3)

问题是您的“现在”值是固定值(例如'now': ((((31+28+3)*24)*60)*60),)。

相反,您应该使用JavaScript的原生new Date()动态获取“现在”值,如下所示:

// We will get the "now" value from this variable
var today = new Date();

// My target date is this month 30th 9.25pm
var target = new Date(today);
target.setDate(30);
target.setHours(21,25,0,0);;

// Countdown start from yesterday
var yesterday = new Date(today);
yesterday.setDate(today.getDate() - 1);
yesterday.setHours(0,0,0,0);;

$('.countdown').final_countdown({
    'start': yesterday.getTime() / 1000,
        'end': target.getTime() / 1000,
        'now': today.getTime() / 1000,
    seconds: {
        borderColor: '#8ef58e',
        borderWidth: '9'
    },
    minutes: {
        borderColor: '#ff8d72',
        borderWidth: '9'
    },
    hours: {
        borderColor: '#69ccff',
        borderWidth: '9'
    },
    days: {
        borderColor: '#ffd35c',
        borderWidth: '9'
    }
});

请参考小提琴的工作示例: http://jsfiddle.net/zeskysee/v0hc6cfj/11/

希望这有帮助:)

答案 1 :(得分:0)

<script type="text/javascript">
        $('document').ready(function () { var end = Math.floor((new Date("02/11/2018")).getTime() / 1000);
            var start = Math.floor((new Date("01/23/2018")).getTime() / 1000);
            var now = Math.floor((new Date).getTime() / 1000);
            $('.countdown').final_countdown({
                'start': start,
                'end': end,
                'now': now

            });
      });