JavaScript实现每分钟切换引语功能异常，仅显示最后一条引语求助

API 探路者

2026-9-24

问题根因

引语仅展示最后一项：reloadquote函数内的循环会遍历所有引语并依次覆盖DOM内容，函数执行完成后只会保留最后一次赋值的数组末尾元素
引语加载延迟：setInterval默认会等待指定间隔后才首次执行回调，页面加载后的前60秒不会触发引语更新，会一直显示初始占位符
隐藏时间显示bug：12小时制判断分支中变量赋值逻辑写反，未初始化的hour变量会导致时间显示为undefined

修复后完整代码

JS部分

// 全局维护引语索引与数组，避免重复初始化
let quoteIndex = 0;
const quotes = ["hello", "kya hua", "gufufish", "wuwfywoifhw"];

// 页面加载完成立即执行一次，消除初始等待延迟
window.onload = function() {
  reloadpage();
  reloadquote();
}

window.setInterval(reloadpage, 1000);
function reloadpage() {
  let date = new Date();
  let ampm;
  let hour;
  let hours = date.getHours();

  if (hours <= 12) {
    // 修复原逻辑变量赋值写反的问题
    hour = hours;
    ampm = "AM";
  } else {
    hour = hours % 12;
    ampm = "PM";
  }
  // 补前导零，个位数时间显示更规整，可按需删除
  let minutes = String(date.getMinutes()).padStart(2, '0');
  let seconds = String(date.getSeconds()).padStart(2, '0');

  let time = hour + ":" + minutes + ":" + seconds + " " + ampm;
  document.querySelector(".time").innerHTML = time;
}

window.setInterval(reloadquote, 60000);
function reloadquote() {
  // 索引自增后取模数组长度，实现循环切换
  quoteIndex = (quoteIndex + 1) % quotes.length;
  document.getElementById("Quote").innerHTML = quotes[quoteIndex];
}