javascript - 一页上有几个倒计时
问题描述
我正在为我的网站寻找倒计时日期计时器。我应该使用计时器来向用户展示特定产品的促销期。交易是我发现的所有计时器在一页上只能使用一次。我找到了很好的计时器并在下面提供了它的代码。你能帮我把几个计时器放在一个页面上吗?
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>
解决方案
您的柜台已设置为拥有多个柜台。您只需要使用 class 而不是 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>
推荐阅读
- python - 动态泛型类生成
- javascript - 为什么 $.getJSON 返回带有有效 JSON 文件的 ParseError?
- wsdl - WSDL 找不到默认端点
- html - 在 flex 列中重新排列 div?
- cpanel - 图片大小限制问题?面板设置?
- verilog - Adder 的行为模块,用于添加两个 64 位输入并进位输入。如何将结转分配给总和的 MSB?
- awk - Gawk 错误消息在调用行失败
- assembly - emu8086 虚拟机:在 LED 显示中输出温度计结果
- css - 如何使用material-ui使reactjs网站响应
- http2 - 在 Hyper 中禁用服务器证书验证?