将倒数计时器连接到数据库

Question

我正在尝试开发在线拍卖。这就是为什么，我需要几个倒计时器，用于显示提供的有效时间。我正在使用循环＆＃34; foreach＆＃34;用于表示数据库中的商品的功能有一个字段＆＃34; ValidFor＆＃34;数据在＆＃34; dd-mm-yyyy＆＃34;表格中的格式。我找到了在一个页面上使用多个计时器的解决方案，但是在将我的数据变量与计时器代码连接时遇到了困难。问题是我必须手动添加我在数据库中已有的商品的截止日期。 我已经有了变量，但它们都是文本格式。

在以下格式中，必须为计时器输入要约的截止日期：

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

对于下一个计时器我需要复制一行代码并更改它的id，添加新的截止日期。我只想从数据库中获取数据并进入计时器。

或手动更改div的id：

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

使用CSS，JavaScript和HTML

查看计时器的完整视图

计时器的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');
  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();
}

在HTML中它看起来很随意，我必须为不同的计时器输入不同的id，我在那里使用循环＆＃34; foreach＆＃34;获取优惠：

<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>