每30秒重置一次计数器

时间:2012-03-07 04:17:16

标签: javascript jquery ruby-on-rails jquery-plugins countdown

好的我正在使用jquery countdown plugin,声明在

之下
$j(document).ready(function() {
$j('#clock').countdown( { to : "#{event.start_date.strftime("%Y:%m:%d:%H:%M")}", remaining : "#{event.start_date - Time.now}", display_on_complete : 'list', hide_on_complete : 'countdown' } );
});

这个工作正常,但每隔30秒我需要通过此ajax调用来更新此倒计时

$j(document).ready(function() {
    function refresh() {
    $j.ajax({
    type: "GET",
    url: "http://developer.yahooapis.com/TimeService/V1/getTime?appid=YahooDemo&output=json",
    dataType: "jsonp",
    success: function(data){
    unix_timestamp = data.Result.Timestamp
    var json_date = new Date(unix_timestamp*1000);
    console.log(json_date);
    setTimeout(refresh, 30000);
    }
});

正如你所看到的那样,日期是json_date变量.....我需要每隔30秒更换倒计时方法中的Time.now ......关于如何实现这一点的任何想法

1 个答案:

答案 0 :(得分:2)

jQuery-countdown-Timer插件不支持设置任意剩余时间。

此外,该插件不会将remaining作为选项。 (它也没有display_on_complete或hide_on_complete`选项。如果你链接到错误的插件,请告诉我。)

假设您希望插件有任意剩余时间是您的问题,您必须修改插件。

我将jquery.countdown-timer.js的第42~50行更改为:

if (options.remaining) {
    seconds_remaining = options.remaining;
} else {
    // Split the specified date/time string into an array
    var date_elements = options.to.split(':');

    // Create Date objects for start and end date/times
    var end_date = new Date (date_elements[0], date_elements[1] - 1, date_elements[2], date_elements[3], date_elements[4]);
    var start_date = new Date();

    // Calculate number of seconds remain until end date/time
    seconds_remaining = (end_date.getTime() - start_date.getTime()) * .001;
}

在AJAX通话中按照以下方式调用倒计时功能:

function refresh() {
    $j.ajax({
        type: "GET",
        url: "http://developer.yahooapis.com/TimeService/V1/getTime?appid=YahooDemo&output=json",
        dataType: "json", // your url doesn't have a callback, no need for jsonp
        success: function(data){
            unix_timestamp = data.Result.Timestamp
            var json_date = new Date(unix_timestamp*1000);

            $j('#clock').countdown({ remaining: (event.start_date - json_date) * .001 });

            setTimeout(refresh, 30000);
        }
    });
}

这假设event对象在refresh函数的范围内,$j是你的jQuery对象。

我可能会完全误解你的问题,所以如果我是,请告诉我。

相关问题