如何在頁面刷新時隨機更改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的背景顏色

回答

相關問題