如何为每个ID元素生成独立随机数？现有JavaScript代码问题求助

嘿，我来帮你搞定这个问题！首先得明确两个核心问题：

1. HTML规范里id是唯一标识，同一个页面不能有多个相同的id="now"，这会导致选择器行为异常，也不符合标准。
2. 你之前的localStorage只存储了一组随机数和时间，所有元素自然只能共用同一个值。

下面是调整后的完整解决方案：

第一步：修改HTML结构 #

把重复的id="now"改成class="now-item"，这样我们可以合法地选择所有需要显示随机数的元素：

<div class="now-item"></div>
<div class="now-item"></div>
<div class="now-item"></div>

第二步：更新JavaScript逻辑 #

我们给每个元素分配独立的存储项，用元素的索引作为唯一标识，确保每个元素的随机数和更新时间都单独存储和检查：

function updateRandomNumbers() {
  // 获取所有需要处理的元素
  const items = document.querySelectorAll('.now-item');
  
  items.forEach((item, index) => {
    // 为每个元素生成唯一的存储键名
    const lastClearKey = `lastclear_${index}`;
    const randomNumKey = `now_p_${index}`;
    const nowTime = (new Date()).getTime();
    
    // 从localStorage获取当前元素的存储数据
    let lastClear = localStorage.getItem(lastClearKey);
    let randomNum = localStorage.getItem(randomNumKey);
    
    // 检查是否需要更新随机数（超过1分钟或首次加载）
    if (!lastClear || (nowTime - lastClear) > 1000 * 60) {
      randomNum = Math.floor(Math.random() * 20) + 4;
      localStorage.setItem(lastClearKey, nowTime);
      localStorage.setItem(randomNumKey, randomNum);
    }
    
    // 更新当前元素的显示内容
    item.textContent = `${randomNum} now`;
  });
}

// 首次加载执行
updateRandomNumbers();
// 每分钟自动更新一次
setInterval(updateRandomNumbers, 1000 * 60);

关键逻辑说明 #

• 用class="now-item"替代重复id，符合HTML规范，也能正确选中所有目标元素。
• 每个元素通过index生成唯一的存储键（比如lastclear_0、now_p_1），确保各自的随机数和更新时间独立存储。
• 遍历每个元素时，单独检查其对应的存储时间，判断是否需要生成新的随机数。
• 最后通过setInterval实现每分钟自动更新所有元素的随机数。

这样调整后，每个元素都会显示独立的随机数，并且各自遵循每分钟更新的规则啦！

内容的提问来源于stack exchange，提问作者Juan David