javascript - 一页上有几个倒数计时器

标签 javascript html css web countdowntimer

我正在为我的网站寻找倒计时日期计时器。我应该使用计时器向用户显示特定产品的促销期。交易是我发现的所有计时器只能在一页上使用一次。我找到了很好的计时器并在下面提供了它的代码。你能帮我把几个计时器放在一个页面上吗？

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>

最佳答案

您的计数器已设置为具有多个计数器。您只需要使用类而不是 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>

关于javascript - 一页上有几个倒数计时器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50466067/

上一篇：html - 使用列数显示元素列表时出现问题

下一篇：html - 如何使用 CSS 将内联元素置于 block 元素中？

相关文章：

debugging - 如何在 Visual Studio 中停止 Javascript 运行时错误通知

javascript - 浏览器中显示多余的 <p></p>

javascript - 根据文本长度自动在表格中显示更多/更少的文本

css - @font-face 不适用于 Firefox，但适用于 Chrome

css - React Native 中的响应式网格

javascript - 读取文本文件以在 HTML 中显示

javascript - Javascript 中使用连接代替加法

javascript - 禁用自动完成上的自动选择 | jQuery用户界面

html - 粘性头部边框消失

jQuery ui 对话框不在 ASP.NET MVC 3 应用程序中使用 site.css

©2024 IT工具网  联系我们