0
Я пытаюсь добавить два таймера обратного отсчета к шаблону, который я получил в Интернете. У меня возникли проблемы с выяснением того, как добавить вторую дату.Добавление нескольких таймеров на одну страницу html
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);
Я был бы признателен за любые help.Thanks
со второго дня вы имеете в виду второй обратный отсчет? можете ли вы ссылаться на плагин обратного отсчета jquery, который вы используете? – Ozrix
Из вашего кода похоже, что вы пытаетесь добавить вторую дату к тому же таймеру. Я сомневаюсь, что таймер будет работать таким образом (хотя я не знаю точно, потому что я не знаю, какой тайм-плагин вы используете). Мое лучшее предположение - вам нужно дублировать html с помощью отдельного идентификатора (возможно, id = "countdown2"), а затем инициализировать тот, который вы, как и первый. – nurdyguy
Измените идентификатор второго таймера HTML, затем дублируйте jQuery с помощью нового идентификатора. Я что-то упускаю? – Scott