背景顏色更改 onload JavaScript+Html

Question

我正在嘗試編寫我自己的網站，但是我有一個想法，每次加載/刷新頁面時，網站都會隨機更改為一組背景顏色（但不會背靠背重復相同的顏色）。 我記得我在學校時做過與此非常相似的事情，但我不太記得它是如何完成的。

到目前為止，這就是我所擁有的，我已經擺弄了大約一天，只是無法弄清楚我錯過了什么。

任何幫助將不勝感激。

<html>
<head>
<script type="text/javascript">
<!--
var color = new Array();
color[0] = "#CC99FF";
color[1] = "#FF99CC";
color[2] = "#FF9999";
color[3] = "#FFCC99";
color[4] = "#FFFF99";
color[5] = "#CCFF99";
color[6] = "#99FF99";
color[7] = "#99FFCC";
color[8] = "#66FFFF";
color[9] = "#66CCFF";

function changeColor()
{
  var randomColor = Math.floor(Math.random() * color.length);
  document.body.style.backgroundColor = color[randomColor];

}
--!>
</script>
</head>
<body onload="changeColor()">
</body>
</html>

Answer 1

我注意到你的問題有第二部分，那就是不要重復相同的顏色兩次。 由於您是在重新加載時執行此操作，因此它變得有點棘手，因為您不能將最后一種顏色存儲在一個簡單的變量中。

為此，我決定使用localStorage 。 我還利用了其他一些答案，其中提到您需要在 body 元素上使用 style 屬性。

這是解決方案的小提琴，代碼如下：

如前所述，您需要使用 style 屬性來設置背景顏色：

document.getElementsByTagName("body")[0].style.backgroundColor=color[randomColor];

然后，您需要繼續查找上次運行中未使用的索引：

首先，我獲取當前存儲的索引，如果不存在則獲取 -1。

var lastColorIndex = localStorage.getItem('lastColorIndex') || -1;

然后在兩個索引不相等或隨機顏色為 -1 時設置循環（這是在初始頁面加載時）。 請注意，我們使用==進行“真實”檢查，因為localStorage將返回一個字符串，而Math.random()返回一個數字；

while(lastColorIndex == randomColor || randomColor === -1)

最后，將 randomColor 值設置到本地存儲中。

localStorage.setItem('lastColorIndex',randomColor);

現在都在一起了：

function changeColor()
{
    var lastColorIndex = localStorage.getItem('lastColorIndex') || -1;
  var randomColor = -1;
    while(lastColorIndex == randomColor || randomColor === -1) {        
  randomColor = Math.floor(Math.random() * color.length);
        console.log('LastIndex: ' + lastColorIndex + ',RandomColor: ' + randomColor);
    };
    localStorage.setItem('lastColorIndex',randomColor);
    //console.log(randomColor);
  console.log(color[randomColor]);
    document.getElementsByTagName("body")[0].style.backgroundColor=color[randomColor];
};

Answer 2

你必須了解你的體型：

function changeColor() {
  var randomColor = Math.floor(Math.random() * color.length);
  document.body.style.backgroundColor = color[randomColor];
}

Answer 3

你可以像這樣改變背景顏色

function changeColor()
{
  var randomColor = Math.floor(Math.random() * color.length);
  document.body.style.background = color[randomColor];
}

Answer 4

您沒有正確訪問背景顏色屬性。請以這種方式使用它。

function changeColor()
{
  var randomColor = Math.floor(Math.random() * color.length);
  document.body.style.backgroundColor = color[randomColor]; //THIS IS IMP

}

Answer 5

看看這個小提琴（單擊“運行”幾次以模擬重新加載）：

http://jsfiddle.net/4j61r6go/

function changeColor()
{
  var randomColor = Math.floor(Math.random() * color.length);
  console.log(color[randomColor]);
  document.getElementsByTagName("body")[0].style.backgroundColor=color[randomColor];
};

您應該在窗口或文檔“onload”中調用“changeColor”。

Answer 6

我在一個主題中找到了一個代碼希望這對你有幫助

        $('.animated-bg').each(function(){
        var $this = $(this),
            colors = ['#ec008c', '#00bcc3', '#5fb26a', '#fc7331'];

        setInterval(function(){
            var color = colors.shift();
            colors.push(color);
            $this.animate({backgroundColor: color}, 2000);
        },4000);
    });

背景顏色更改 onload JavaScript+Html

問題描述

6 個解決方案

解決方案1
1 已采納 2015-07-02 14:36:50

解決方案2
0 2015-07-02 13:42:37

解決方案3
0 2015-07-02 13:42:46

解決方案4
0 2015-07-02 13:44:29

解決方案5
0 2015-07-02 13:51:12

解決方案6
0 2019-04-06 05:11:15

背景顏色更改 onload JavaScript+Html

問題描述

6 個解決方案

解決方案1 1 已采納 2015-07-02 14:36:50

解決方案2 0 2015-07-02 13:42:37

解決方案3 0 2015-07-02 13:42:46

解決方案4 0 2015-07-02 13:44:29

解決方案5 0 2015-07-02 13:51:12

解決方案6 0 2019-04-06 05:11:15

解決方案1
1 已采納 2015-07-02 14:36:50

解決方案2
0 2015-07-02 13:42:37

解決方案3
0 2015-07-02 13:42:46

解決方案4
0 2015-07-02 13:44:29

解決方案5
0 2015-07-02 13:51:12

解決方案6
0 2019-04-06 05:11:15