Question

我正在尝试将两个倒计时器添加到我上网的模板中。我在确定如何添加第二个日期时遇到了问题。

HTML：

<div class="fullwidth colour1 clearfix">
<div id="countdown" class="bodycontainer clearfix" data-uk-scrollspy="{cls:'uk-animation-fade', delay: 300, repeat: true}">
    <h1>Date1</h1>
    <div id="countdowncont" class="clearfix">
        <ul id="countscript">
            <li>
                <span class="days">00</span>
                <p>Days</p>
            </li>
            <li>
                <span class="hours">00</span>
                <p>Hours</p>
            </li>
            <li class="clearbox">
                <span class="minutes">00</span>
                <p>Minutes</p>
            </li>
            <li>
                <span class="seconds">00</span>
                <p>Seconds</p>
            </li>
        </ul>
    </div>

</div>

JS：

$(document).ready(function() {
    "";
    $("#countdown").countdown({
        date: "01 May 2017 12:00:00",       /** Enter new date here **/
        format: "on"
    },
    function() {
        // callback function
    });
});

这是从以下评论中请求的倒计时插件：

  (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 : "00" + days;
            hours = (String(hours).length >= 2) ? hours : "00" + hours;
            minutes = (String(minutes).length >= 2) ? minutes : "00" + 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("19 April 2016 11:12:00");
            clearInterval(interval); 
        }
    }
    //run the function
    countdown_proc();
    //loop the function
    interval = setInterval(countdown_proc, 1000);
}

}）（jQuery）;

感谢任何帮助。谢谢

Answer 1

您可以尝试以下代码：

//add first date 
$(document).ready(function() {

    $("#countdown::nth-child(1)").countdown({
        date: "01 May 2017 12:00:00",       /** Enter new date here **/
        format: "on"
    },
    function() {
        // callback function
    });

    //add second date
    $("#countdown::nth-child(2)").countdown({
        date: "01 May 2017 12:00:00",       /** Enter new date here **/
        format: "on"
    },
    function() {
        // callback function
    });

});

我建议你使用倒计时作为班级名而不是id

将多个计时器添加到一个html页面

1 个答案: