如何使用JavaScript每隔30秒更新HTML中的div内容

嗨，我来帮你搞定这个定时更新图片的需求！你遇到的问题大概率是两个核心点：浏览器缓存导致旧图片不刷新，或者定时逻辑没写到位。结合你给出的HTML结构，我给你一套完整的可落地方案：

第一步：完善你的HTML结构 #

先确保图片标签有明确的标识（类名或ID），方便JS精准定位。假设你的HTML补全后是这样的：

• • • 实时摄像头画面

      

第二步：编写JavaScript定时更新逻辑 #

把这段代码放在HTML的<script>标签里（建议放在</body>标签前，确保DOM加载完成后再执行）：

// 定义更新图片的核心函数
function refreshCamImage() {
  // 获取目标图片元素
  const camImg = document.querySelector('.sub-cam .live-cam-img');
  if (!camImg) {
    console.warn("未找到图片元素，请检查类名是否匹配");
    return;
  }

  // 关键操作：给图片URL添加时间戳，绕过浏览器缓存
  const originalUrl = camImg.src.split('?')[0]; // 移除旧的时间戳参数
  const newUrl = `${originalUrl}?t=${new Date().getTime()}`;
  
  // 更新图片地址
  camImg.src = newUrl;

  // 可选：处理图片加载失败的降级逻辑
  camImg.onerror = function() {
    console.error("摄像头图片加载失败，尝试重新获取");
    this.src = "这里可以设置一张备用图片的地址";
  };
}

// 页面加载完成后立即执行一次，再启动定时任务
document.addEventListener('DOMContentLoaded', function() {
  // 首次加载图片，避免页面空白等待30秒
  refreshCamImage();
  // 设置定时：30000毫秒 = 30秒
  setInterval(refreshCamImage, 30000);
});

几个必须注意的细节 #

• 缓存问题：这是最容易踩的坑！如果图片URL固定，浏览器会默认缓存图片，即使服务器上的图片更新了，浏览器还是会读取本地缓存。添加时间戳?t=时间戳能让浏览器认为这是全新的URL，从而重新请求最新的图片。
• 元素定位：如果页面有多个摄像头图片，建议给每个图片加唯一ID（比如id="cam-1"），然后用document.getElementById('cam-1')获取元素，比类名选择更精准。
• 跨域问题：如果目标网站不允许跨域访问图片，会出现CORS错误。这种情况下需要对方服务器设置Access-Control-Allow-Origin响应头，或者通过你的后端代理来获取图片。

这样设置后，你的页面就会每30秒自动刷新指定区域的图片啦！

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