複数のタイマーを1つのhtmlページに追加する

Question

私はオンラインになったテンプレートに2つのカウントダウンタイマーを追加しようとしています。もう1つの日付を追加する方法がわかりません。

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

任意のhelp.Thanksいただければ幸いです：

//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