Question

所以我对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);

Answer 1

您正在使用的代码不期望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中不起作用

1 个答案: