如何在页面刷新时随机更改div的背景颜色

这是我的第一个问题，因此如果我做错了任何事情，请原谅我。我正在做一个网站的布局，我希望标题在用户刷新页面时随机更改颜色。我已经做了一些研究，并得到了这些javascript代码：如何在页面刷新时随机更改div的背景颜色

<script type="text/javascript">  
     var randnum = Math.random(); 
     var inum = 2; 
     var rand1 = Math.round(randnum * (inum-1)) + 1; 
     var colors = new Array; 
     colors[1] = "#385c78"; 
     colors[2] ="#9d302f"; 
     var color = colors[rand1] 
     document.getElementById('navbar').style.backgroundColor = image;  
    </script>

这一个去头标记。它在我想要的两个之间选取一个随机的十六进制代码并将其存储在var颜色中。

我正在使用的第二个在身上。

<script type="text/javascript"> 
     //writes "<div id="header" style="background-color:#something">" 
     document.write('<div id="header" style="background-color:' + color + '">') 
    </script> 
     <!-- continuation of div id="navbar" --> 
        *Header code here* 
    </div>

问题是，这样做的做法给了我一些麻烦，因为div id =“header”写在javascript里面。我无法正确包装其他div，Google Chrome的检测元素告诉我，主体大小为1333px x 80px（因为它可以在此处看到http://puu.sh/2yjKi），只是标题大小，并且不包含其余的网站内容。所以我的问题是：有没有什么办法来改善这个代码？通过javascript或类似的东西让该div的背景颜色变化？

我感谢您提前阅读并感谢您的帮助。

来源

2013-04-11 Gus

不要只是不使用'document.write'，与此同时太旧了。 – VisioN

为什么不只是像普通的'html'那样创建标题，然后通过脚本编辑'background-color'（通过id或class找到它）？ – trajce

我认为这是行得通的。我该怎么做，trajce？我很抱歉，但我只是javascript – Gus

将标题输出为标准HTML，然后使用JavaScript更新onDomReady的颜色。趣谈这样的：

$(document).ready(function() { 
    var colors = ["#385c78", "#9d302f"], 
    selectedColor = colors[Math.floor(Math.random()*colors.length)] 
    header = $("div#header"); 

    header.css("background-color", selectedColor); 
});

http://jsfiddle.net/ryanbrill/GD3qB/

来源

2013-04-11 23:19:30 ryanbrill

类似[This url]（http://stackoverflow.com/questions/5897573/jquery-random-background-color-and-color-on-2-divs）。虽然不错。 – Mee

是的，我使用了Mee发送的链接，但是这个链接类似于那个。对于任何人都好奇，这是我正在使用的：http://pastebin.com/w2Mb9ivC。但非常感谢您的帮助！ – Gus

function changecolor() { 
    var colors = ["#B40404", "#0000FF", "#FE2E9A", "#FF0080", "#2EFE2E", ]; 
    var rand = Math.floor(Math.random() * colors.length); 
    $('#controls-wrapper').css("background-color", colors[rand]); 
    setTimeout('changecolor()', 1000); 
}

来源

2014-09-25 10:46:30

虽然职位是有点老了，但我的回答可以帮助别人谁还会在此着陆就像我一样！ DEMO HTML：

<div style="height:150px"> 
    <div> 
    <h1><center>That's how i change color!!</center></h1> 
    </div> 
    <br><br> 
    <div class="bordered" id="fancy"> 
    <center>I behave like a chameleon!!</center> 
    </div> 
</div>

JS：

setInterval(function() { 
    document.getElementById("fancy").style.background= '#'+Math.floor(Math.random()*16777215).toString(16); 
    document.body.style.background= '#'+Math.floor(Math.random()*16777215).toString(16); 
}, 1000);

希望这会帮助别人！

来源

2015-10-07 18:58:42

如何在页面刷新时随机更改div的背景颜色

回答

相关问题