Использование функции onload в операторах if/else

Question

Я пытаюсь создать страницу, где в зависимости от времени суток расположение изображения отличается. Так как солнце поднимается на странице в зависимости от часа - в 6 утра это находится в нижнем левом углу, в 7 утра это немного выше и т. Д. Я использовал функцию 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

Вы определяете function generateSunball несколько раз, и эти определения не распространяются до if..else блока. Последний останется единственным.

Рассмотрим попробовать:

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; 
}; 

Есть много способов решить ту же проблему. Выберите тот, который вам подходит, но избегайте скопированного кода, если вы можете;)