Я искал таймер обратного отсчета даты для своего сайта. Я предполагал использовать таймер для показа пользователям периода акции по определенному продукту. Дело в том, что все таймеры, которые я нашел, можно использовать только один раз на одной странице. Я нашел хороший таймер и предоставил его код ниже. Можете ли вы помочь мне разместить несколько таймеров на одной странице?
function CountdownTimer(elm, tl, mes) {
this.initialize.apply(this, arguments);
}
CountdownTimer.prototype = {
initialize: function(elm, tl, mes) {
this.elem = document.getElementById(elm);
this.tl = tl;
this.mes = mes;
},
countDown: function() {
var timer = '';
var today = new Date();
var day = Math.floor((this.tl - today) / (24 * 60 * 60 * 1000));
var hour = Math.floor(((this.tl - today) % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
var min = Math.floor(((this.tl - today) % (24 * 60 * 60 * 1000)) / (60 * 1000)) % 60;
var sec = Math.floor(((this.tl - today) % (24 * 60 * 60 * 1000)) / 1000) % 60 % 60;
var me = this;
if ((this.tl - today) > 0) {
timer += '<span class="number-wrapper"><div class="caption">ДЕНЬ</div><span class="number day">' + day + '</span></span>';
timer += '<span class="number-wrapper"><div class="caption">ЧАС</div><span class="number hour">' + hour + '</span></span>';
timer += '<span class="number-wrapper"><div class="caption">МИН</div><span class="number min">' + this.addZero(min) + '</span></span><span class="number-wrapper"><div class="line"></div><div class="caption">СЕК</div><span class="number sec">' + this.addZero(sec) + '</span></span>';
this.elem.innerHTML = timer;
tid = setTimeout(function() {
me.countDown();
}, 10);
} else {
this.elem.innerHTML = this.mes; //sale is over
return;
}
},
addZero: function(num) {
return ('0' + num).slice(-2);
}
}
function CDT() {
// Set countdown limit
var tl = new Date('2018/06/21 18:28:00');
// You can add time's up message here
var timer = new CountdownTimer('CDT', tl, '<span class="number-wrapper"><div class="line"></div><span class="number end">Акция Закончилась!</span></span>');
timer.countDown();
}
window.onload = function() {
CDT();
}#CDT {
font-size: 12px;
color: #eee;
font-weight: bold;
}
#CDT .number-wrapper {
margin: 10px;
-moz-box-shadow: 0 5px 8px #000000;
-webkit-box-shadow: 0 5px 8px #000000;
box-shadow: 0 5px 8px #000000;
position: relative;
}
#CDT .number {
display: inline-block;
*display: inline;
*zoom: 1;
background: #000;
background-image: linear-gradient(bottom, #000000 2%, #3c3c3c 50%, #000000 100%);
background-image: -o-linear-gradient(bottom, #000000 2%, #3c3c3c 50%, #000000 100%);
background-image: -moz-linear-gradient(bottom, #000000 2%, #3c3c3c 50%, #000000 100%);
background-image: -webkit-linear-gradient(bottom, #000000 2%, #3c3c3c 50%, #000000 100%);
background-image: -ms-linear-gradient(bottom, #000000 2%, #3c3c3c 50%, #000000 100%);
-webkit-border-top-right-radius: 7px;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 0;
border-top-right-radius: 7px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
padding: 0 5px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #555;
-moz-box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);
-moz-text-shadow: 0 3px 3px #000000;
-webkit-text-shadow: 0 3px 3px #000000;
text-shadow: 0 3px 3px #000000;
}
#CDT .line {
position: absolute;
background: #000;
}
.caption {
font-size: 12px;
position: absolute;
bottom: -30px;
left: 0;
text-align: center;
width: 100%;
color: #777;
}<p style="margin:5px; font-weight:bold;" id="CDT"></p>