Mehrere Timer zu einer HTML-Seite hinzufügen

Question

Ich versuche, zwei Countdown-Timer zu einer Vorlage hinzuzufügen, die ich online hatte. Ich habe Probleme herauszufinden, wie man ein zweites Datum hinzufügt.

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 
    }); 
}); 

Dies wird der Countdown Stecker in die von den Kommentaren unten angefordert wurde:

(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);

würde ich irgendwelche help.Thanks schätzen

Answer 1

Sie unter Code versuchen:

//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 
    }); 

}); 

und ich schlage vor, Sie Countdown als Klassennamen verwenden, anstatt id