Home:ALL Converter>Connecting countdown timer to database

Connecting countdown timer to database

Ask Time:2018-06-08T22:11:58         Author:Natlus

Json Formatter

I am trying to develop an online auction. That's why, I need several countdown timers that is used to show time that offer is valid for. I am using looping "foreach" function for representing offers from database. There is a field "ValidFor" with data in "dd-mm-yyyy" format in table for offers. I have found solution for using several timers on one page, but having difficulties in connecting my data variable with timer`s code. The problem is that I have to manually add deadlines for offers, which I already have in database. I already have variables, but they are in text format. Offers looks

In the following format deadlines for offers has to be entered for timer:

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

and for next timer I need to copy one line of code and change it`s id, add new deadline. I just want to fetch data from database and enter into timer.

OR manually change id for div:

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

Full view of timer with CSS, JavaScript and HTML JS Fiddle

The timer`s javascript is following:

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();
}

In HTML it looks followingly, where I have to enter different id for different timers, where I am using looping "foreach" for fetching offers:

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

Author:Natlus,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/50762565/connecting-countdown-timer-to-database
yy