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>

如何使用JavaScript基于时间追加2个不同的图像？

1 个答案: