如何用JavaScript根据时间添加两张不同图片？图片无显示问题排查

嘿，我来帮你搞定这个根据时间切换图片的问题～先给你一个能正常运行的完整示例，然后咱们再聊聊你代码可能踩的坑：

首先是HTML结构，我们先准备一个用来放图片的容器：

<div id="time-image-container">
  <!-- 图片会通过JavaScript动态插入到这里 -->
</div>

然后是核心的JavaScript代码，这里我们会判断当前时间，选择对应的图片插入到容器中：

// 等待DOM完全加载后再执行代码，避免找不到元素
document.addEventListener('DOMContentLoaded', function() {
  // 获取存放图片的容器元素
  const imgContainer = document.getElementById('time-image-container');
  
  // 先检查容器是否存在，防止报错
  if (!imgContainer) {
    console.error('找不到指定的图片容器！');
    return;
  }

  // 获取当前时间的小时数（24小时制，范围0-23）
  const currentHour = new Date().getHours();

  // 定义两张图片的信息，记得替换成你自己的图片路径
  const timeImages = {
    day: {
      src: './daytime.jpg', // 比如上午/白天的图片路径
      alt: '白天场景'
    },
    night: {
      src: './nighttime.jpg', // 比如晚上的图片路径
      alt: '夜晚场景'
    }
  };

  // 创建img元素
  const displayImg = document.createElement('img');

  // 根据时间判断显示哪张图片
  // 这里示例是6点到18点显示白天图，其余时间显示夜晚图，你可以按需调整
  if (currentHour >= 6 && currentHour < 18) {
    displayImg.src = timeImages.day.src;
    displayImg.alt = timeImages.day.alt;
  } else {
    displayImg.src = timeImages.night.src;
    displayImg.alt = timeImages.night.alt;
  }

  // 可选：给图片加一些基础样式，比如控制大小
  displayImg.style.width = '400px';
  displayImg.style.height = 'auto';
  displayImg.style.borderRadius = '8px';

  // 将图片插入到容器中
  imgContainer.appendChild(displayImg);
});

• DOM加载时机不对：如果你的JS代码写在HTML元素之前（比如<head>标签里），执行代码时DOM还没加载完成，自然找不到要插入图片的容器，导致图片无法显示。解决办法就是用DOMContentLoaded事件包裹代码，或者把JS代码放在</body>标签的前面。
• 图片路径错误：检查你写的图片src是否正确。相对路径要和HTML文件的位置对应，比如图片和HTML在同一文件夹就直接写文件名，在子文件夹里就写./images/daytime.jpg。可以打开浏览器控制台（按F12），切换到“网络”标签，看看有没有图片加载失败的404错误。
• 元素选择器写错了：比如HTML里的容器是<div class="img-box">，你却用getElementById('img-box')去获取，肯定找不到元素。要确保选择器和HTML元素的ID/class完全一致。
• 时间判断逻辑错误：比如你把时间范围写反了（比如currentHour > 18写成currentHour < 18），或者误用了12小时制的时间却没处理上午/下午的判断，导致图片切换逻辑出错。
• 忘记插入图片到DOM：如果只是创建了img元素、设置了src，但没有用appendChild()或者innerHTML把元素添加到页面的DOM结构里，图片也不会显示出来。

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