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

时间：2019-02-08 16:15:48

标签： javascript

这个简单的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>

2 个答案:

答案 0 :(得分：2)

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

答案 1 :(得分：1)

您对id部分是正确的。就像任何与编程相关的事物一样，ID应该是唯一的，因此getElementById将仅返回与给定id匹配的第一个元素。

getElementsByClassName（请注意s：Element s ）将返回与该类名称匹配的所有元素的节点列表（类似于数组）。之后，您将需要遍历每个元素以对其进行处理：

//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 clocks = document.getElementsByClassName(className);

  for (let clock of clocks) {
    updateClock(clock, endtime);
    var timeinterval = setInterval(() => updateClock(clock, endtime), 1000);
  }
}

function updateClock(clock, endtime) {
  var t = getTimeRemaining(endtime);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

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

相关问题
最新问题