时间不更新是倒数计时器,jQuery

时间:2016-08-16 18:26:23

标签: jquery countdown

我尝试使用jQuery制作倒数计时器,但无法正确显示时间。实际上,每次刷新不正确的页面时,时间都会更新。我没有更新相应的时间字段,而是在此字段中不断添加相同的时间值:a screen shot of my result

这是我的代码:

$(document).ready(function(){
var deadline='Feb 26, 2017'; // deadline date
var t;
var days, hours, minutes, seconds;

   //remaining time object constructor
    var gtr = function (endtime) {
    t = Date.parse(endtime) - Date.parse(new Date());
    seconds = Math.floor((t/1000)%60);
    minutes = Math.floor((t/1000/60)%60);
    hours =Math.floor((t/(1000*60*60))%24);
    days = Math.floor(t/(1000*60*60*24));

    return {'total':t,
            'days':days,
            'hours':hours,
            'minutes':minutes,
            'seconds':seconds
        };
}

var bar = new gtr(deadline);

// adding span tags to the main "clock" div. These tags will contain remaining time (days, hours, minutes, seconds)

function initializeCountdown () {
        $('#clock').append( "<span>"+"</span>" +'<br>'+
                            "<span>"+"</span>"+'<br>'+
                            "<span>"+"</span>"+'<br>'+
                            "<span>"+"</span>");

        // adding class names to span tags

        $('#clock span:first-child').addClass("days");
        $('#clock span:nth-child(3)').addClass("hours");
        $('#clock span:nth-child(5)').addClass("minutes");
        $('#clock span:nth-child(7)').addClass("seconds");
}

initializeCountdown();

function updateClock () {
    $('.days').append(bar.days);
    $('.hours').append(bar.hours);
    $('.minutes').append(bar.minutes);
    $('.seconds').append(bar.seconds);
}

setInterval(updateClock,1000);
});

感谢任何帮助:)

0 个答案:

没有答案
相关问题