Несколько таймеров обратного отсчета на одной странице

Natlus спросил: 28 апреля 2018 в 09:22 в: 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>


6 ответов

Есть решение
mplungjan ответил: 28 апреля 2018 в 09:41

Ваш счетчик уже настроен, чтобы иметь более одного счетчика. Вам просто нужно было использовать класс вместо 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>
Natlus ответил: 28 апреля 2018 в 10:35
Спасибо, много работает))
Natlus ответил: 28 апреля 2018 в 10:38
Еще один вопрос: возможно ли автоматическое дублирование настроек? Дело в том, что система автоматически генерирует количество продуктов для продажи. Вот почему я злюсь, как можно было бы изменить id ="CDT2" для следующего анонса, например id ="CDT3" @mplungjan
mplungjan ответил: 28 апреля 2018 в 11:10
Я думал, что у меня есть решение для вас. Но это не обновляет первый таймер. Возможно, задайте новый вопрос, почему - я уверен, что это что-то простое? jsfiddle.net/mplungjan/prwsfeub
Natlus ответил: 28 апреля 2018 в 12:47
Хорошо, спасибо @mplungjan
mplungjan ответил: 28 апреля 2018 в 09:39
Это совершенно другой обратный отсчет
Dimpal ответил: 28 апреля 2018 в 09:57
только стиль отличается не логическим
mplungjan ответил: 28 апреля 2018 в 10:01
Не нужно было менять код обратного отсчета в вопросе OPs, только изменить ID на CLASS
Dimpal ответил: 28 апреля 2018 в 10:01
хорошо, я постараюсь решить его
mplungjan ответил: 28 апреля 2018 в 10:04
Это уже решено