JavaScript: Class 而不是 ID

Question

我需要不止一个时钟。在我的尝试中，我将 document.getElementById 替换为 Document.getElementsByClassName。不幸的是，它没有像我尝试的那样工作。有人可以帮我吗？

function currentTime() {
        
    var date = new Date();
    var hour = date.getHours();
    var min = date.getMinutes();
    var midday = "AM";
    midday = (hour >= 12) ? "PM" : "AM";
    hour = (hour == 0) ? 12 : ((hour > 12) ? (hour - 12): hour);
    hour = updateTime(hour);
    min = updateTime(min);
    
    let hours = document.createElement('span')
    let points = document.createElement('span')
    let mins = document.createElement('span')
    let blank = document.createElement('span')
    let middays = document.createElement('span')
    
    hours.innerHTML = hour
    points.innerHTML = ":"
    mins.innerHTML = min
    blank.innerHTML = " "
    middays.innerHTML = midday
    
    document.getElementById("clock").innerHTML = ""
    document.getElementById("clock").appendChild(hours);
    document.getElementById("clock").appendChild(points);
    document.getElementById("clock").appendChild(mins);
    document.getElementById("clock").appendChild(blank);
    document.getElementById("clock").appendChild(middays);
    
    var t = setTimeout(currentTime, 1000);
    }
    function updateTime(k) {
    if (k < 10) {
    return "0" + k;
    }
    else {
    return k;
    }
    }
    currentTime();

<p id="clock"></p>

Answer 1

使用getElementsByClassName()，如果你看函数，元素是复数。函数getElementsByClassName()其实是returns一个数组！所以，你只需要使用： document.getElementsByClassName('class')[index]。

希望您了解数组的工作原理。如果没有，这里是 MDN and w3schools. I recommend reading w3schools first then seeing MDN

Answer 2

您不能在同一页面上有多个 ID，因此您需要将其替换为 class 和 select 所有这些都替换为 document.querySelectorAll(".class-name") 然后你可以遍历它。

Answer 3

我做了这个，你的问题是什么？

function currentTime(elementsClass)
{
  let AllClock = document.getElementsByClassName(elementsClass)
    , theClock = AllClock[0]
    , hours    = document.createElement('span')
    , points   = document.createElement('span')
    , mins     = document.createElement('span')
    , blank    = document.createElement('span')
    , middays  = document.createElement('span')
    , date     = null
    , hour     = null
    , theClockInnerHTML = ''
    ;
  theClock.appendChild(hours);
  theClock.appendChild(points);
  theClock.appendChild(mins);
  theClock.appendChild(blank);
  theClock.appendChild(middays);

  points.textContent  = ":"
  blank.textContent   = " "

  updateClock()

  setInterval(updateClock, 1000);

  function updateClock()
  {
    date   = new Date()
    hour   = date.getHours()
    hours.textContent   = time2digits( (hour == 0) ? 12 : ((hour > 12) ? (hour - 12): hour)  )
    mins.textContent    = time2digits( date.getMinutes())
    middays.textContent = (hour >= 12) ? "PM" : "AM"

    if (theClock.innerHTML!=theClockInnerHTML) {
      theClockInnerHTML = theClock.innerHTML
      for(let i=1;i<AllClock.length;i++) {
        AllClock[i].innerHTML = theClockInnerHTML
      }
    }
  }
  function time2digits(k)
  {
    return (k < 10) ? ("0" + k) : k
  }
}


currentTime('clock');

<p class="clock"></p>
<p class="clock"></p>
<p class="clock"></p>

Answer 4

const clocks = document.querySelectorAll('.clock');

function currentTime() {
        
  var date = new Date();
  var hour = date.getHours();
  var min = date.getMinutes();
  var midday = "AM";
  midday = (hour >= 12) ? "PM" : "AM";
  hour = (hour == 0) ? 12 : ((hour > 12) ? (hour - 12): hour);
  hour = updateTime(hour);
  min = updateTime(min);
  
  const clock = `${hour}:${min} ${midday}`

  for (var i = 0; i < clocks.length; i++) {
    clocks[i].innerHTML = clock;
  }
  
  var t = setTimeout(currentTime, 1000);
  }
  function updateTime(k) {
    if (k < 10) {

         return "0" + k;
    }
    else {

         return k;
    }

  }

  currentTime();

<p class="clock"></p>
<p class="clock"></p>
<p class="clock"></p>

JavaScript: Class 而不是 ID

JavaScript: Class instead of ID

javascript

time

clock