javascript - 为什么getelementbyid不会在页面上显示两次？

这个简单的JavaScript倒数计时不会在我的页面上显示两次。我了解到getElementbyId要求仅将一个ID与之关联，但是更改为getElementbyClassName并进行相应的调整也不起作用。

Codepen here.

请协助

	//JS Countdown
	var countDownDate = new Date("Feb 13, 2019 23:59:00");
	initializeClock('cd-clock', countDownDate);

	function getTimeRemaining(endtime) {
	  var t = Date.parse(endtime) - Date.parse(new Date());
	  var seconds = Math.floor((t / 1000) % 60);
	  var minutes = Math.floor((t / 1000 / 60) % 60);
	  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
	  var days = Math.floor(t / (1000 * 60 * 60 * 24));
	  return {
		'total': t,
		'days': days,
		'hours': hours,
		'minutes': minutes,
		'seconds': seconds
	  };
	}

	function initializeClock(id, endtime) {
	  var clock = document.getElementById(id);
	  var daysSpan = clock.querySelector('.days');
	  var hoursSpan = clock.querySelector('.hours');
	  var minutesSpan = clock.querySelector('.minutes');
	  var secondsSpan = clock.querySelector('.seconds');

	  function updateClock() {
		var t = getTimeRemaining(endtime);

		daysSpan.innerHTML = t.days;
		hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
		minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
		secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

		if (t.total <= 0) {
		  clearInterval(timeinterval);
		}
	  }

	  updateClock();
	  var timeinterval = setInterval(updateClock, 1000);
	}

#cd-clock {
    font-family: sans-serif;
    display: inline-block;
    font-weight: bold;
    text-align: center;
    font-size: 5em;
}

.card.countdown {
    z-index: 100;
}

    #cd-clock > div {
        padding: 10px;
        border-radius: 3px;
        display: inline-block;
    }

    #cd-clock div > span {
        padding: 2px;
        border-radius: 3px;
        display: inline-block;
    }

.tiny-text {
    padding-top: 0px;
    font-size: 12px;
    font-weight: normal;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<div class="container text-center mb-5">
  <div class="row">
    <div class="col-sm-12">
      <div class="card countdown">
        <h3 class="card-header">Timer #1</h3>
        <div class="card-body">
          <div id="cd-clock">
            <div>
              <span class="days"></span>
              <div class="tiny-text">DAYS</div>
            </div>
            <div>
              <span class="hours"></span>
              <div class="tiny-text">HOURS</div>
            </div>
            <div>
              <span class="minutes"></span>
              <div class="tiny-text">MINUTES</div>
            </div>
            <div>
              <span class="seconds"></span>
              <div class="tiny-text">SECONDS</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container text-center">
  <div class="row">
    <div class="col-sm-12">
      <div class="card countdown">
        <h3 class="card-header">Timer #2</h3>
        <div class="card-body">
          <div id="cd-clock">
            <div>
              <span class="days"></span>
              <div class="tiny-text">DAYS</div>
            </div>
            <div>
              <span class="hours"></span>
              <div class="tiny-text">HOURS</div>
            </div>
            <div>
              <span class="minutes"></span>
              <div class="tiny-text">MINUTES</div>
            </div>
            <div>
              <span class="seconds"></span>
              <div class="tiny-text">SECONDS</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

最佳答案

//JS Countdown
	var countDownDate = new Date("Feb 13, 2019 23:59:00");
	initializeClock('cd-clock', countDownDate);

	function getTimeRemaining(endtime) {
	  var t = Date.parse(endtime) - Date.parse(new Date());
	  var seconds = Math.floor((t / 1000) % 60);
	  var minutes = Math.floor((t / 1000 / 60) % 60);
	  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
	  var days = Math.floor(t / (1000 * 60 * 60 * 24));
	  return {
		'total': t,
		'days': days,
		'hours': hours,
		'minutes': minutes,
		'seconds': seconds
	  };
	}

	function initializeClock(className, endtime) {
	  var clock = document.getElementsByClassName(className);
    Array.from(clock).forEach(clock => {
    var daysSpan = clock.querySelector('.days');
	  var hoursSpan = clock.querySelector('.hours');
	  var minutesSpan = clock.querySelector('.minutes');
	  var secondsSpan = clock.querySelector('.seconds');
    setInterval(() => updateClock(daysSpan, hoursSpan, minutesSpan, secondsSpan), 1000);
    updateClock(daysSpan, hoursSpan, minutesSpan, secondsSpan);

    })

	  function updateClock(dSpan, hSpan, mSpan, sSpan)     {
		var t = getTimeRemaining(endtime);

		dSpan.innerHTML = t.days;
		hSpan.innerHTML = ('0' + t.hours).slice(-2);
		mSpan.innerHTML = ('0' + t.minutes).slice(-2);
		sSpan.innerHTML = ('0' + t.seconds).slice(-2);

		if (t.total <= 0) {
		  return;
		 }
	  }
	}

#cd-clock {
    font-family: sans-serif;
    display: inline-block;
    font-weight: bold;
    text-align: center;
    font-size: 5em;
}

.card.countdown {
    z-index: 100;
}

    .cd-clock > div {
        padding: 10px;
        border-radius: 3px;
        display: inline-block;
    }

    .cd-clock div > span {
        padding: 2px;
        border-radius: 3px;
        display: inline-block;
    }

.tiny-text {
    padding-top: 0px;
    font-size: 12px;
    font-weight: normal;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<div class="container text-center mb-5">
  <div class="row">
    <div class="col-sm-12">
      <div class="card countdown">
        <h3 class="card-header">Timer #1</h3>
        <div class="card-body">
          <div class="cd-clock">
            <div>
              <span class="days"></span>
              <div class="tiny-text">DAYS</div>
            </div>
            <div>
              <span class="hours"></span>
              <div class="tiny-text">HOURS</div>
            </div>
            <div>
              <span class="minutes"></span>
              <div class="tiny-text">MINUTES</div>
            </div>
            <div>
              <span class="seconds"></span>
              <div class="tiny-text">SECONDS</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container text-center">
  <div class="row">
    <div class="col-sm-12">
      <div class="card countdown">
        <h3 class="card-header">Timer #2</h3>
        <div class="card-body">
          <div class="cd-clock">
            <div>
              <span class="days"></span>
              <div class="tiny-text">DAYS</div>
            </div>
            <div>
              <span class="hours"></span>
              <div class="tiny-text">HOURS</div>
            </div>
            <div>
              <span class="minutes"></span>
              <div class="tiny-text">MINUTES</div>
            </div>
            <div>
              <span class="seconds"></span>
              <div class="tiny-text">SECONDS</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

关于javascript - 为什么getelementbyid不会在页面上显示两次？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54596365/