我尝试使用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);
});
感谢任何帮助:)