时间戳

首页 > 解决方案 > JavaScript：类而不是 ID

javascript - JavaScript：类而不是 ID

问题描述

我需要不止一个时钟。在我的尝试中，我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>

标签： javascripttimeclock

解决方案

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>

推荐阅读