Question

我正在开发一个使用此脚本的项目。这个脚本需要当前时间并从给定时间中减去它...就像我给出 9 10,2017 。它输出 29d 23h 3m 2s 作为剩余时间

 <!DOCTYPE html>
<html>
<head>
    <title>Script</title>
</head>
<body>
<script type='text/javascript'>
// Set the date we're counting down to
var countDownDate = new Date('9 10,2017 00:00:00').getTime(); //m d, y h m s

// Update the count down every 1 second
var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Output the result in an element with id='time'
                  document.getElementById('rtime').innerHTML = days + 'd ' + hours + 'h '
    + minutes + 'm' + seconds + 's';
    // If the count down is over, write some text 
    if (distance <= 0) {
      clearInterval(x);
                   document.getElementById('rtime').innerHTML = 'EXPIRED'; // SUBMIT FORM;
  }
}, 1000); </script>
<h4 id='rtime'></h4>
<h4 id='rtime'></h4>
<h4 id='rtime'></h4>
</body>
</html>

我希望它在我使用其id的所有标签中提供输出。但它只在第一个id元素中给出输出。我用Google搜索了问题并找到了

应该有类而不是id才能再次使用它，类也应该在数组中

我将脚本修改为像这样

<!DOCTYPE html>
<html>
<head>
    <title>Script</title>
</head>
<body>
<script type='text/javascript'>
// Set the date we're counting down to
var countDownDate = new Date('9 10,2017 00:00:00').getTime(); //m d, y h m s

// Update the count down every 1 second
var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Output the result in an element with id='time'
    for(var y=0;y<=3;y++){
                  document.getElementsByClassName('rtime').innerHTML[y] = days + 'd ' + hours + 'h '
    + minutes + 'm' + seconds + 's';
};
    // If the count down is over, write some text 
    if (distance <= 0) {
      clearInterval(x);
                   document.getElementsByClassName('rtime').innerHTML[0] = 'EXPIRED'; // SUBMIT FORM;
  }
}, 1000); </script>
<h4 class='rtime'></h4>
<h4 class='rtime'></h4>
<h4 class='rtime'></h4>
</body>
</html>

但它仍无效。

Answer 1

// Set the date we're counting down to
var countDownDate = new Date('9 10,2017 00:00:00').getTime(); //m d, y h m s

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Output the result in an element with id='time'
  for (var y = 0; y < 3; y++) {
    document.getElementsByClassName('rtime')[y].innerHTML = days + 'd ' + hours + 'h ' +
      minutes + 'm' + seconds + 's';
  };
  // If the count down is over, write some text 
  if (distance <= 0) {
    clearInterval(x);
    document.getElementsByClassName('rtime')[0].innerHTML = 'EXPIRED'; // SUBMIT FORM;
  }
}, 1000);

<h4 class='rtime'></h4>
<h4 class='rtime'></h4>
<h4 class='rtime'></h4>

getElementsByClassName返回具有给定类名的元素数组。

在您的情况下，请执行此getElementsByClassName('rtime')[y].innerHTML和此getElementsByClassName('rtime')[0].innerHTML

我的脚本中没有Javascript document.getElementsByClassName

1 个答案: