Javascript：爲每個問候消息顯示不同的顏色

在我的JavaScript程序中，我試圖爲每個問候消息生成不同的背景顏色，爲此我使用randomColor應用背景顏色，但不工作。任何人都可以告訴我它錯在哪裏。Javascript：爲每個問候消息顯示不同的顏色

代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <title>trail6</title> 
</head> 
<body> 

    <p id="demo"></p> 

    <script> 

    var today = new Date() 
    var curHr = today.getHours() 

    if (curHr >= 0 && curHr < 6) { 
     document.getElementById("demo").innerHTML = 'What are you doing that early?'; 
    } else if (curHr >= 6 && curHr < 12) { 
     document.getElementById("demo").innerHTML = 'Good Morning'; 
    } else if (curHr >= 12 && curHr < 17) { 
     document.getElementById("demo").innerHTML = 'Good Afternoon'; 
    } else { 
     document.getElementById("demo").innerHTML = 'Good Evening'; 
    } 

    var colors = ["#D3FFA3", "#FFF8A7", "#FFBC98", "#FF9A95","#B6FDFF", "#A8FFC1", "#B6FF99"]; 
    var randomColor = colors[Math.floor(Math.random() * colors.length)];  
    document.getElementById("demo").style.backgroundColor = colors[randomColor]; 

</script> 

</body> 
</html>

來源

2017-10-15 pari

當您指定randomColor，你已經訪問colors陣列; randomColor被設置爲十六進制代碼。

因此，您只需直接使用document.getElementById("demo").style.backgroundColor = randomColor而不是document.getElementById("demo").style.backgroundColor = colors[randomColor]將背景顏色設置爲存儲的十六進制代碼即可。

這可以看出，在下面的例子：

var today = new Date() 
 
var curHr = today.getHours() 
 

 
if (curHr >= 0 && curHr < 6) { 
 
    document.getElementById("demo").innerHTML = 'What are you doing that early?'; 
 
} else if (curHr >= 6 && curHr < 12) { 
 
    document.getElementById("demo").innerHTML = 'Good Morning'; 
 
} else if (curHr >= 12 && curHr < 17) { 
 
    document.getElementById("demo").innerHTML = 'Good Afternoon'; 
 
} else { 
 
    document.getElementById("demo").innerHTML = 'Good Evening'; 
 
} 
 

 
var colors = ["#D3FFA3", "#FFF8A7", "#FFBC98", "#FF9A95", "#B6FDFF", "#A8FFC1", "#B6FF99"]; 
 
var randomColor = colors[Math.floor(Math.random() * colors.length)]; 
 
document.getElementById("demo").style.backgroundColor = randomColor;

<p id="demo"></p>

希望這有助於！ :)

來源

2017-10-15 21:44:03

看最後一行

的document.getElementById（「演示」）style.backgroundColor =顏色[randomColor]。

變化像這樣

的document.getElementById（「演示」）style.backgroundColor = randomColor。

只是測試，看上去做工精細

debugger snapshot

來源

2017-10-15 21:59:39

Javascript：爲每個問候消息顯示不同的顏色

回答

相關問題