代码之家  ›  专栏  ›  技术社区  ›  Natlus

一页上有几个倒数计时器

  •  0
  • Natlus  · 技术社区  · 6 年前

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

    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>
    1 回复  |  直到 6 年前
        1
  •  0
  •   mplungjan    6 年前

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