单页部署多个倒计时计时器的实现方案咨询

Great question! The original code only works once because it’s tied to a single element ID (CDT) and initializes just one timer instance. Let’s adjust it to support multiple timers with minimal changes. Here’s how:

Step 1: Update CSS to Use a Reusable Class #

First, replace the unique #CDT selector with a class so all timers share the same styles. This eliminates duplicate CSS and lets you add as many timers as needed:

.countdown-timer { 
  font-size: 12px; 
  color: #eee; 
  font-weight: bold; 
} 
.countdown-timer .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; 
} 
.countdown-timer .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; 
} 
.countdown-timer .line { 
  position: absolute; 
  background: #000; 
} 
.countdown-timer .caption { 
  font-size: 12px; 
  position: absolute; 
  bottom: -30px; 
  left: 0; 
  text-align: center; 
  width: 100%; 
  color: #777; 
}

Step 2: Add Multiple Timer Containers in HTML #

Create unique elements for each timer, using the new countdown-timer class and distinct IDs (e.g., timer1, timer2):

<!-- Timer 1: Summer Sale -->
<p style="margin:5px; font-weight:bold;" id="timer1" class="countdown-timer"></p>

<!-- Timer 2: Flash Deal -->
<p style="margin:5px; font-weight:bold;" id="timer2" class="countdown-timer"></p>

<!-- Add as many timers as you need! -->
<p style="margin:5px; font-weight:bold;" id="timer3" class="countdown-timer"></p>

Step 3: Modify JavaScript to Initialize Multiple Timers #

The original CountdownTimer class is already reusable—we just need to create multiple instances, each targeting its own element ID, deadline, and end message. Replace the hardcoded CDT function with a setup function that initializes all your timers:

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>'; 
      timer += '<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; 
      return; 
    } 
  }, 
  addZero: function(num) { 
    return ('0' + num).slice(-2); 
  } 
} 

// Initialize all your timers here
function setupTimers() {
  // Timer 1: Summer Sale (ends June 21, 2024)
  const timer1 = new CountdownTimer(
    'timer1', 
    new Date('2024/06/21 18:28:00'), 
    '<span class="number-wrapper"><div class="line"></div><span class="number end">Акция Закончилась!</span></span>'
  );
  timer1.countDown();

  // Timer 2: Flash Deal (ends tomorrow)
  const timer2 = new CountdownTimer(
    'timer2', 
    new Date(Date.now() + 24 * 60 * 60 * 1000), 
    '<span class="number-wrapper"><div class="line"></div><span class="number end">Флэш-Дил Закончился!</span></span>'
  );
  timer2.countDown();

  // Timer 3: Limited Stock (ends next week)
  const timer3 = new CountdownTimer(
    'timer3', 
    new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), 
    '<span class="number-wrapper"><div class="line"></div><span class="number end">Товар Закончился!</span></span>'
  );
  timer3.countDown();
}

window.onload = setupTimers;

Key Changes Explained: #

• CSS Class: Using .countdown-timer instead of #CDT applies styles to any timer element.
• Unique IDs: Each timer container has its own ID so JavaScript can target it specifically.
• Multiple Instances: The setupTimers function creates a new CountdownTimer for each timer, with unique deadlines and end messages.

Now you can add as many timers as you want—just repeat the HTML pattern and add a new instance in setupTimers!

内容的提问来源于stack exchange，提问作者Natlus