更改兩個值如果語句

我剛剛開始學習JavaScript，因此這可能是一個非常簡單的問題。我試着尋找答案，但我想我只是不知道如何，'哦，這看起來不同，但也回答我的問題。更改兩個值如果語句

我希望能夠做的是根據一天的時間來改變根據一天的時間網頁的背景顏色，也改變圖像。我使用if ... else if ...語句來處理放置在頁面頭部的背景色，以及單獨的if ... else if ...語句影響正文中的圖像。

頭腳本，改變背景顏色的樣子：

var d=new Date(); 
var time=d.getHours(); 

if (time>=0 && time<=5) 
{ 
document.write ('&lt;body style="background-color: 296688">') 
} 
else if

...然後在其他時間跟隨，每一個不同的顏色。

身體腳本改變圖像的樣子：

<img src="" name="sunMoon" id="sunMoon" /> 
    <script type="text/javascript"> 
    var d=new Date(); 
    var time=d.getHours(); 
    var elem = document.getElementById('sunMoon') 
if (time>=0 && time<=5) 
     { 
     elem.src = 'Images/sunMoon1.png' 
     } 
    else if

...然後在其他時間跟隨，每一個不同的SRC。

是否有可能使用相同的if ... else if語句在頭部更改圖像和bg顏色？我在頭部嘗試了這樣的東西：

var d=new Date(); 
var time=d.getHours(); 
var elem=document.getElementById('sunMoon') 

    if (time>=0 && time<=5) 
    { 
    document.write ('<body style="background-color: 2966B8">'); 
      elem.src="images/sunMoon1.png" 
    } 
else if...

但它沒有工作。

我認爲與第三個（非工作）的例子，要麼不可能有一個如果......做兩件事（改變顏色和圖像），或者我只是搞亂圖像代碼。

來源

2012-03-09 mattjulian

的問題與你的第三個（非工作）的代碼的一點是，您正嘗試更改腳本運行時不存在的元素的源屬性。一般來說，瀏覽器從上到下解析頁面的HTML，當它遇到一個代碼塊時，代碼將繼續通過HTML。所以在這個例子中，你已經開發了改變圖像源代碼的JavaScript代碼，它是在HTML中的元素之後出現的，這就是爲什麼它能夠工作。在破壞的代碼中，您在頭部中調用elem=document.getElementById('sunMoon')，因此尚未存在ID爲'sunMoon'的元素。

一般來說是在頁面（在結束標記之前）的底部放置你的腳本，使他們一切加載後運行，而不會阻塞頁面的渲染最佳實踐。如果你這樣做，你需要改變改變背景顏色的代碼，因爲你不能直接寫入body標籤。最佳實踐解決方案是根據一天中的時間將不同的CSS類應用於正文，然後爲CSS中的每個類設置樣式規則。

因此，例如：

<script type="text/javascript"> 

    var body = document.getElementsByTagName('body')[0]; 
    var elem = document.getElementById('sunMoon'); 

    if (time>=0 && time<5) 
    { 
    body.className = 'morning'; 
    elem.src = 'Images/sunMoon1.png'; 
    } 
    else if (time>=5 && time<10) 
    { 
    body.className = 'afternoon'; 
    elem.src = 'Images/sunMoon2.png'; 
    } 

</script>

然後在你的CSS，你需要規則.morning，.afternoon等

來源

2012-03-09 03:54:35 MartinAnsty

，完美的工作！謝謝！（另一個初學者問題：在var body = document.getElementsByTagName（'body'）[0]，這個零爲什麼？） – mattjulian 2012-03-09 14:07:15

getElementsByTagName（）返回元素數組（注意它是「元素」，複數），因爲它返回所有來自頁面的匹配元素。在這種情況下，只有一個元素會被返回，因爲只有一個標籤;但是如果您確實獲得了ElementElementByTagname（'img'），它將返回多個元素。無論哪種情況，返回的元素都會返回到一個數組中。 [0]是你如何指定你想要數組的第一個項目（在這種情況下是唯一的項目）。如果你想了解更多查看JavaScript數組符號 – MartinAnsty 2012-03-09 15:46:57

Gotcha。再次感謝！ – mattjulian 2012-03-09 19:57:16

是的，你可以，你可以改變身體的風格是這樣的：

document.body.style.backgroundcolor = color;

來源

2012-03-09 03:47:31 Hanon

是的，你可以使用

var d=new Date(); 
var time=d.getHours(); 
var elem=document.getElementById('sunMoon') 

if (time>=0 && time<=5) 
{ 
document.body.style.backgroundImage ="images/sunMoon1.png"; 
document.body.style.backgroundColor = "#2966B8"; 
}

來源

2012-03-09 03:50:40 PraveenVenu

使用onload事件

<html> 
    <head> 
     <script> 

      function onBodyload(e){ 

        var image = document.getElementById('sunMoon'); 

        if(condition){ 
         document.body.style.backgroundcolor = ... 
         image.src = ... 
        }else if(condition){ 
         document.body.style.backgroundcolor = ... 
         image.src = ... 
        }else if...    

      } 

     </script> 
    </head> 
    <body onload="onBodyload"> 
     ... 
     ... 
    </body> 
</html>

來源

2012-03-09 04:59:36 Diode

更改兩個值如果語句

回答

相關問題