一页上有几个倒数计时器

Question

我一直在寻找网站的倒数计时器。 我应该使用计时器向用户显示特定产品的促销期限。 达成的协议是我发现的所有计时器在一页上只能使用一次。 我找到了很好的计时器，并在下面提供了其代码。 您能帮我在页面中放置几个​​计时器吗？

 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> 

Answer 1

您的柜台已设置为具有多个柜台。 您只需要使用类而不是ID并重复设置即可：

// Set countdown limit
var tl = new Date('2018/06/21 18:28:00');
var t2 = new Date('2018/06/23 10:28:00');

// You can add time's up message here
var timer1 = new CountdownTimer('CDT1', tl, '<span class="number-wrapper"><div class="line"></div><span class="number end">Акция Закончилась!</span></span>');
timer1.countDown();
var timer2 = new CountdownTimer('CDT2', t2, '<span class="number-wrapper"><div class="line"></div><span class="number end">Акция Закончилась!</span></span>');
timer2.countDown();

https://jsfiddle.net/mplungjan/re76ahd3/

 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">' +this.addZero(day) + '</span></span>'; timer += '<span class="number-wrapper"><div class="caption">ЧАС</div><span class="number hour">' + this.addZero(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'); var t2 = new Date('2018/06/23 10:28:00'); // You can add time's up message here var timer1 = new CountdownTimer('CDT1', tl, '<span class="number-wrapper"><div class="line"></div><span class="number end">Акция Закончилась!</span></span>'); timer1.countDown(); var timer2 = new CountdownTimer('CDT2', t2, '<span class="number-wrapper"><div class="line"></div><span class="number end">Акция Закончилась!</span></span>'); timer2.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; } 

 <div style="margin:5px; font-weight:bold;" id="CDT1" class="CDT"></div> <br/> <hr/> <div style="margin:5px; font-weight:bold;" id="CDT2" class="CDT"></div>