我正在制作一个项目,其中日期通过表单传递,然后通过函数将新的 div 附加到具有唯一 ID 和计时器的页面。虽然这个项目在 Chrome 中完美运行,但在 Firefox、IE 中却不行。问题出在身份证上。我在 countdown() 函数中收到 id 警报,但在代码中指定的倒计时插件中没有。有趣的是,如果只有一个 div 的 id 像“id”,而不是多个 div 的唯一 id 像“id1”、“id2”、“id3”,那么该插件也可以在 Firefox 中工作。所以问题是 Firefox 在某种程度上没有解析倒计时插件中的多个 id。请参阅 countdown(id) 函数。
function add_countdown_handler() {
$('.countdownParentDiv').each(function () {
var btn = this;
countdown(btn.id);
});
}
function countdown(id) {
var date = $('#end_date'+id).val(); //eg- 2016-01-01 00:00:00
alert(id); **//working**
alert(date); **//working**
$('#countdown'+id).countdown({ date: date}, function() {
alert('id:'+id); **//not working**
alert('date:'+d); **//not working**
});
}
//这个倒计时插件可以正常工作
(function($) {
$.fn.countdown = function (options,callback) {
var settings = {'date': null};
if(options) {
$.extend(settings, options);
}
var this_sel = $(this);
function count_exec() {
eventDate = Date.parse(settings['date']) / 1000;
currentDate = Math.floor($.now() / 1000);
if(eventDate <= currentDate) {
callback.call(this);
clearInterval(interval);
}
seconds = eventDate-currentDate;
days = Math.floor(seconds/(60*60*24));
seconds -= days*60*60*24;
hours = Math.floor(seconds/(60*60));
seconds -= hours * 60 * 60;
minutes = Math.floor(seconds/60);
seconds -= minutes * 60;
days = (String(days).length !==2) ? '0' + days : days;
hours = (String(hours).length !==2) ? '0' + hours : hours;
minutes = (String(minutes).length !==2) ? '0' + minutes : minutes;
seconds = (String(seconds).length !==2) ? '0' + seconds : seconds;
if(!isNaN(eventDate)) {
this_sel.find('.days').text(days);
this_sel.find('.hours').text(hours);
this_sel.find('.mins').text(minutes);
this_sel.find('.secs').text(seconds);
}
}
count_exec();
var interval = setInterval(count_exec, 1000);
}
})(jQuery);
这就是我在Chrome中得到的,非常完美。这里计时器正在工作:
这是同一张照片,但从Firefox中截取(这里的计时器是 00:00:00...)