所以我不太擅长 JavaScript,我可以使用模板,但无法从头开始构建任何东西。主要是,我编写网站代码,这样我就不必付钱给其他人来做。
但我有一个问题,我出于某种原因从模板中获得的这个倒计时计时器不接受倒计时“倒计时”到的日期。它在 var
中所做的就是允许您输入 null
然后它会倒计时到 7 月的某个时间。我不知道为什么要这样做。这是 JsBin 的链接,虽然我不经常使用它,所以我不确定我是否做对了:https://jsbin.com/tahageg/edit?html,js,output
(function($) {
$.fn.countdown = function(options, callback) {
//custom 'this' selector
thisEl = $(this);
//array of custom settings
var settings = {
'date': null,
'format': null,
};
//append the settings array to options
if(options) {
$.extend(settings, options);
}
//main countdown function
function countdown_proc() {
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)); //calculate the number of days
seconds -= days * 60 * 60 * 24; //update the seconds variable with no. of days removed
hours = Math.floor(seconds / (60 * 60));
seconds -= hours * 60 * 60; //update the seconds variable with no. of hours removed
minutes = Math.floor(seconds / 60);
seconds -= minutes * 60; //update the seconds variable with no. of minutes removed
//conditional Ss
if (days == 1) { thisEl.find(".timeRefDays").text("day"); } else { thisEl.find(".timeRefDays").text("days"); }
if (hours == 1) { thisEl.find(".timeRefHours").text("hour"); } else { thisEl.find(".timeRefHours").text("hours"); }
if (minutes == 1) { thisEl.find(".timeRefMinutes").text("minute"); } else { thisEl.find(".timeRefMinutes").text("minutes"); }
if (seconds == 1) { thisEl.find(".timeRefSeconds").text("second"); } else { thisEl.find(".timeRefSeconds").text("seconds"); }
//logic for the two_digits ON setting
if(settings['format'] == "on") {
days = (String(days).length >= 2) ? days : "0" + days;
hours = (String(hours).length >= 2) ? hours : "0" + hours;
minutes = (String(minutes).length >= 2) ? minutes : "0" + minutes;
seconds = (String(seconds).length >= 2) ? seconds : "0" + seconds;
}
//update the countdown's html values.
if(!isNaN(eventDate)) {
thisEl.find(".days").text(days);
thisEl.find(".hours").text(hours);
thisEl.find(".minutes").text(minutes);
thisEl.find(".seconds").text(seconds);
} else {
alert("Invalid date. Here's an example: 12 Tuesday 2012 17:30:00");
clearInterval(interval);
}
}
//run the function
countdown_proc();
//loop the function
interval = setInterval(countdown_proc, 1000);
}
}) (jQuery)
;
最佳答案
您使用的代码不希望在 settings.date 字段中出现 Date 对象。它需要一个字符串,然后将对其进行解析。
此代码 eventDate = Date.parse(settings['date'])/1000;
将您的字符串转换为 Date 对象,然后获取该日期的秒表示以与今天进行比较。
因此您可以将函数调用为 $('#elementId').countdown({date: '12/31/2018'})
或者,您可能希望查看不使用 jQuery 且具有完整工作示例和演练的更简单的实现 https://www.sitepoint.com/build-javascript-countdown-timer-no-dependencies/
编辑:将日期字符串更改为美国格式
关于javascript - 倒数计时器在 JavaScript 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42015857/