Fatal编程技术网
  • javascript/
  • 背景颜色更改加载JavaScript+；Html

背景颜色更改加载JavaScript+；Html

javascript html

背景颜色更改加载JavaScript+；Html,javascript,html,Javascript,Html,我正在尝试写我自己的网站，但是我有一个想法，那就是在每次加载/刷新页面时，网站都会随机改变一系列背景颜色（但不是背靠背重复相同的颜色）。我记得在学校的时候做过类似的事情，但我就是不太记得是怎么做的 到目前为止，这就是我所拥有的，我已经摆弄了大约一天，只是不太明白我错过了什么 如蒙协助，将不胜感激 <html> <head> <script type="text/javascript"> <!-- var color = new Array(); colo

我正在尝试写我自己的网站，但是我有一个想法，那就是在每次加载/刷新页面时，网站都会随机改变一系列背景颜色（但不是背靠背重复相同的颜色）。我记得在学校的时候做过类似的事情，但我就是不太记得是怎么做的

到目前为止，这就是我所拥有的，我已经摆弄了大约一天，只是不太明白我错过了什么

如蒙协助，将不胜感激

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



您必须访问您的身体样式：


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



你可以像那样改变背景色


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



您没有正确访问背景色属性。请按此方式使用


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

}



看看这把小提琴（点击“运行”几次以模拟重新加载）：




您应该在Window或document中将“changeColor”称为“onload”。
我注意到您的问题还有第二部分，即不要重复同一颜色两次。由于您是在重新加载时执行此操作，因此它变得有点棘手，因为您不能仅将最后一种颜色存储在一个简单的变量中

为此，我决定利用。我还利用了其他一些答案，其中提到您需要在body元素上使用style属性

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

如上所述，您需要使用style属性设置背景色：


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


然后，您需要继续查找上次运行中未使用的索引：

首先，我获取当前存储的索引，如果它不存在，则获取-1


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


然后在两个索引不相等时设置do循环，或者如果random color为-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];
};



我在一个主题中找到了一个代码，希望这能对你有所帮助


        $('.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);
    });



谢谢你的投入，我仍然无法让这个工作，但，有任何其他想法为我？

        $('.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);
    });