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属性。

以下是解决方案的Fiddle，代码如下：

如上所述，您需要使用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];
};

你应该在windowor文档'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 个答案: