0

ウィンドウがリロードされるたびに div クラスの背景色に変更しようとしています。
このコードを使用して、更新時に本文の背景色を変更しました。

<script type="text/javascript">
<!-- //Enter list of bgcolors:
var bgcolorlist=new Array("silver", "#BAF3C3", "#c3baf3")

document.body.style.background=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]
// -->
</script>

しかし、「.three」の背景色を変更しようとしているので、クラス「three」を持つすべての div は、ウィンドウがリロードされるたびに (色の配列から選択して) 異なる背景色になります。
これを行う方法を理解できないようですが、それはまったく可能ですか?

4

5 に答える 5

1

これを使って

var bgcolorlist=new Array("silver", "#BAF3C3", "#c3baf3")

$(".three").css("background-color",bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]);
于 2012-11-29T12:12:55.563 に答える
1

bg-colorを変更する必要がある場合はlocalStorage、ページがリロードされる前に bg が何であったかを確認するために使用できます。

var colours = ['#F00','#0F0'];//my eyes!
var currentColour = +(localStorage.previousBGColour || -1)+1;
currentColour = currentColour >= colours.length ? 0 : currentColour;//if index is not set reset to colour at index 0
document.getElementById('theDiv').style.backgroundColor = colours[currentColour];
localStorage.previousBGColour =  currentColour;//store colour that's currently in use

すべてのブラウザーが をサポートしているわけではないことに注意してくださいlocalStorage。たとえば、古くて使いにくい IE8 をまだ使用している人もいます。

jQuery

$(document).ready(function()
{
    (function()
    {//this IIFE is optional, but is just a lot tidier (no vars cluttering the rest of the script)
        var colours = ['#F00','#0F0'],
        currentColour = +(localStorage.previousBGColour || -1) + 1;
        $('#theDiv').css({backgroundColor:colours[currentColour]});
        localStorage.previousBGColour = currentColour;
    }());
}
于 2012-11-29T12:22:29.520 に答える
0

純粋なJSを使用することにより：

window.onload = function(){
    var arr = document.querySelectorAll(".three");
    for(var i=0;i<arr.length;i++){
         arr[i].style.background = bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]
    }
}

これにより、クラス3のランダムな色のすべてのdivが得られます。すべてを同じにしたい場合は、math.randomを変数にキャッシュするだけです。

于 2012-11-29T12:19:09.250 に答える
0

JQueryを使用してできること

$(document).ready(function(){
    $('.three').css('background-color',bgcolorlist[Math.floor(Math.random()*bgcolorlist.length));
});
于 2012-11-29T12:13:49.720 に答える
0 
var bgcolorlist = ['silver', '#BAF3C3', '#C3BAF3'];

$(function() {
    $('.three').css({
        background: bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]
    });
});

ページが読み込まれるたびに、リストからランダムな色が選択され、本文の css に設定されます。

于 2012-11-29T12:13:51.130 に答える