如何使用 JavaScript 根据时间附加 2 个不同的图像？

Question

这是我目前的代码：

var d = new Date();
var time = d.getHours();
var img = new Image();
var img2 = new Image(); 
var div = document.getElementById('geometry2');

img.onload = function() {
 if (time < 12) {
  div.appendChild(img);
 };
else {
  div.appendChild(img2);
}

img.src = 'images/morning.png';
img2.src = 'images/other.png';

我不确定我的错误是什么，但没有一张图片显示。这是它所指的 HTML 元素的代码：

    <img src="images/geometry.png" id="geometry2" alt="">

Answer 1

这里有几个错误：

• 用分号关闭if/else 这将给出一个javascript 控制台出错并停止进一步执行您的代码
• 不关闭带有花括号的onload 事件的函数 - 这将与上述相同
• 您正在尝试将 image 附加到 image - image 不是 图像集合，它是单个 image 和 src（来源）

修复：

• 正确关闭函数
• 去掉if后面的分号
• 给div一个id
• 在javascript中获取div
• 将image 附加到div

固定代码：

<div id="divImages">
    <img src="../images/geometry.png" id="geometry2" alt="">
</div>

<script>        
    var d = new Date();
    var time = d.getHours();
    var img = new Image();
    var img2 = new Image();
    var div = document.getElementById('divImages');

    img.onload = function () {
        if (time < 12) {
            div.appendChild(img);
        }
        else {
            div.appendChild(img2);
        };

    img.src = '../images/morning.jpg';
    img2.src = '../images/other.png';
</script>