Question

我有3个div

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<button>Enter</button>

我想用javascript控制的css给它一个随机颜色。像这样：

var randomColor = Math.ceil(Math.random() * 3);
var color = "";
//Accessing the divs
var box1 = document.querySelector("#box1");
var box2 = document.querySelector("#box2");
var box3 = document.querySelector("#box3");

//Event
var button = document.querySelector("button");
button.addEventListener("click", randomize, false);
button.style.cursor = "pointer";

function render(){
    box1.style.background = color;
    box2.style.background = color;
    box3.style.background = color;
}

function randomize(randomColor){
    switch(randomColor){
        case 1:
        color = "red";
        break;
        case 2:
        color = "blue";
        break;
        case 3:
        color = "green";
        break;
    }
render();
}

问题是，它在每个div中给我相同的颜色。任何想法我怎么能解决这个问题，我想做它纯javascript和css没有jquery如果可能的话。我还在学习javascript。谢谢..

Answer 1

您可以使用class es而不是id来简化您的代码。

＆＃13;

// You could easily add more colors to this array.
var colors = ['red', 'blue', 'green', 'teal', 'rosybrown', 'tan', 'plum', 'saddlebrown'];
var boxes = document.querySelectorAll(".box");
var button = document.querySelector("button");

button.addEventListener("click", function () {
  for (i = 0; i < boxes.length; i++) {
    // Pick a random color from the array 'colors'.
    boxes[i].style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
    boxes[i].style.width = '100px';
    boxes[i].style.height = '100px';
    boxes[i].style.display = 'inline-block';
  }
});

button.style.cursor = "pointer";

＆＃13;

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<button>Enter</button>

＆＃13;

在页面刷新/加载时随机化颜色。

＆＃13;

// You could easily add more colors to this array.
var colors = ['red', 'blue', 'green', 'teal', 'rosybrown', 'tan', 'plum', 'saddlebrown'];
var boxes = document.querySelectorAll(".box");

for (i = 0; i < boxes.length; i++) {
  // Pick a random color from the array 'colors'.
  boxes[i].style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
  boxes[i].style.width = '100px';
  boxes[i].style.height = '100px';
  boxes[i].style.display = 'inline-block';
}

＆＃13;

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

＆＃13;

Answer 2

这个怎么样？

http://jsfiddle.net/stackmanoz/vymmb10s/

<强> CSS -

div[class^="box"]{
    width:100px;
    height:100px;
    border:1px solid;
    display:inline-block;
    }

<强>的jQuery -

var colors = ['red', 'blue', 'green', 'gray', 'black', 'yellow'];
$(function(){
     $("#btn").click(function() {
     $('div[class^="box"]').each(function(){
        var randomColor = Math.floor(Math.random() * colors.length)
        $(this).css('background-color', colors[randomColor])
                                  });
});
});

Answer 3

var r = Math.floor(Math.random()*255);
var g = Math.floor(Math.random()*255);
var b = Math.floor(Math.random()*255);
for (var i = 0; i <= 5; i++) {
var div = document.getElementsByClassName("div")[i].style.backgroundColor = "rgb("+r+","+g+","+b+")";
}

div {
width: 200px;
height:200px;
display: inline;
float: left;
margin: 15px;
background-color: red;
}

<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>

Answer 4

*

<html>
        <head>
            <style>
                div {
                    width: 100px;
                    height: 100px;
                    position: relative;
                    border: 1px solid black;
                    float: left;
                    margin: 5px;
                }
            </style>
        </head>
        <body>
            <div id="first"></div>
            <div id="second"></div>
            <div id="third"></div>
            <div id="fourth"></div>
        </body>
        <script>
            let colors = ['red', 'green', 'blue', 'yellow'];
            (function () {
                document.getElementById("first").style.backgroundColor = assignColor();
                document.getElementById("second").style.backgroundColor = assignColor();
                document.getElementById("third").style.backgroundColor = assignColor();
                document.getElementById("fourth").style.backgroundColor = assignColor();
            })();
            function assignColor() {
                let colorIndex = Math.floor(Math.random() * colors.length);
                let color = colors[colorIndex];
                colors.splice(colorIndex, 1);
                return color;
            }
        </script>
    </html>

不同div上的随机颜色

4 个答案: