javascript - 在 if/else 语句中使用 onload 函数

Question

我正在尝试创建一个页面，其中图像的位置根据一天中的不同时间而不同。就像太阳根据时间在页面上升起一样——早上 6 点它在左下角，早上 7 点它更高一点，等等。我为每个部分使用了一个 onload 函数，但最后一个 onload 函数似乎会覆盖一切，无论该部分是否是当前时间。如果不是当天的那个时间，有没有办法取消 onload 功能？这是我的脚本的要点:

var today = new Date().getHours();
if (today >= 6 && today < 7) {
    document.body.style.background = "lightBlue";
    window.onload = generateSunball;
    function generateSunball() {
        var sunUp=document.getElementById("sunAppear");
        sunUp.style.display='';
        sunUp.style.position='absolute';
        sunUp.style.top='480px';
        sunUp.style.left='30px';
        sunUp.style.width='200px';
        sunUp.style.height='200px';
    }
} 
else if (today >=7 && today < 8) {
    document.body.style.background = "lightBlue";
    window.onload = generateSunball;
    function generateSunball() {
        var sunUp=document.getElementById("sunAppear");
        sunUp.style.display='';
        sunUp.style.position='absolute';
        sunUp.style.top='330px';
        sunUp.style.left='120px';
        sunUp.style.width='200px';
        sunUp.style.height='200px';
    }
}

Answer 1

您正在多次定义functiongenerateSunball，并且这些定义的范围不限于if..else block 。最后一张将是唯一剩下的一张。

考虑尝试:

window.onload = function() {
    // do stuff here
};

还值得注意的是，您可以完全重构您的代码。类似...

switch(today) {
case 6:
    window.onload = ...;
    break;
case 7:
    ...
    break;
...
deafult:
    ...
}

或者，使用选项定义单个对象:

var sunProperties = {
    "6":{
        "top": "480px",
        "left": "30px"
    },
    "7":{
        "top": "330px",
        "left": "120px"
    }
    ...
};
window.onload = function() {
    var sunUp = document.getElementById('sunAppear');
    sunUp.style.display = "";
    sunUp.style.position = "absolute";
    sunUp.style.width = sunUp.style.height = "200px";
    sunUp.style.top = sunProperties[today].top;
    sunUp.style.left = sunProperties[today].left;
};

解决同一问题有多种方法。选择一个适合您的代码，但如果可以的话，请避免复制粘贴代码;)