不同div上的颜色随机 [英] Random color on different div's

问题描述

我有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 =";//访问divvar box1 = document.querySelector(#box1");var box2 = document.querySelector(#box2");var box3 = document.querySelector(#box3");//事件var button = document.querySelector("button");button.addEventListener("click"，randomize，false);button.style.cursor =指针";函数render(){box1.style.background =颜色;box2.style.background =颜色；box3.style.background =颜色;}函数randomize(randomColor){开关(randomColor){情况1:color =红色";休息;情况2:color ="blue";休息;情况3:color =绿色"；休息;}使成为();} 

问题在于，每个div都给我相同的颜色.任何想法我怎么解决这个问题，我想做的纯JavaScript和CSS没有jQuery的，如果可能的话.我还在学习JavaScript.谢谢.

解决方案

您可以使用 class es代替 id s，并简化代码以使其遵循.>

 //您可以轻松地向此数组添加更多颜色.var colors = [红色"，蓝色"，绿色"，蓝绿色"，玫瑰棕色"，棕褐色"，李子"，鞍褐色"]；var box = document.querySelectorAll(.box");var button = document.querySelector("button");button.addEventListener("click"，function(){对于(i = 0; i< box.length; i ++){//从数组颜色"中选择一种随机颜色.box [i] .style.backgroundColor = colors [Math.floor(Math.random()* colors.length)];box [i] .style.width ='100px';box [i] .style.height ='100px';box [i] .style.display ='inline-block';}});button.style.cursor =指针";  

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

---

随意刷新/加载页面上的颜色.

 //您可以轻松地向此数组添加更多颜色.var colors = [红色"，蓝色"，绿色"，蓝绿色"，玫瑰棕色"，棕褐色"，李子"，鞍褐色"]；var box = document.querySelectorAll(.box");对于(i = 0; i< box.length; i ++){//从数组颜色"中选择一种随机颜色.box [i] .style.backgroundColor = colors [Math.floor(Math.random()* colors.length)];box [i] .style.width ='100px';box [i] .style.height ='100px';box [i] .style.display ='inline-block';}  

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

I have 3 div's

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

I want to give it a random color using javascript controlled css. Like this:

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

The problem is that, it's giving me the same color in every div. Any idea how can i solve this, I want to do it pure javascript and css no jquery if possible. Im still learning javascript. Thank you..

解决方案

You could use classes instead of ids and simplify your code to following.

// 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";

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

---

Randomizing the colors on page refresh/load.

// 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';
}

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

这篇关于不同div上的颜色随机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！