Question

我想在每次刷新页面时更改圆圈的颜色

JavaScript代码：

var colors = ['#ff0000', '#00ff00', '#0000ff'];
var random_color = colors[Math.floor(Math.random() * colors.length)];
document.getElementById('cirkel1').style.background = random_color;

CSS代码：

div {display: inline-block; margin-left: 10px;}

#cirkel1 { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }

#cirkel2 { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }

#cirkel3 { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }

#cirkel4 { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }

和HTML代码：

<div id='cirkel'>
    <div id="cirkel1"></div>
    <div id='cirkel2'></div>
    <div id='cirkel3'></div>
    <div id='cirkel4'></div>
</div>

但出于某种原因，它似乎无法发挥作用。

Answer 1

您的代码无效，因为var random_color = colors[Math.floor(Math.random() * colors.length)];

一次为您提供一种颜色并将其存储在random_color中以获得随机颜色或每当您需要新的随机颜色时需要调用的每个圆圈

请阅读我的代码中的评论以了解其工作原理

var colors = ['#ff0000', '#00ff00', '#0000ff'];
var random_color = colors[Math.floor(Math.random() * colors.length)];
//document.getElementById('cirkel1').style.background = random_color;
var x = document.getElementsByClassName("cir"); // read all circle by class name 
for(var i=0;i<x.length;i++ ){
// loop through every circle and every time generate a new random color 
 x[i].style.background = colors[Math.floor(Math.random() * colors.length)];
    console.log( x[i])
}

div {display: inline-block; margin-left: 10px;}

    #cirkel1 { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }

    #cirkel2 { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }

    #cirkel3 { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }

    #cirkel4 { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }

<div id='cirkel'>
    <div id="cirkel1" class="cir"></div>
    <div id='cirkel2' class="cir"></div>
    <div id='cirkel3' class="cir"></div>
    <div id='cirkel4' class="cir" ></div>
</div>

Answer 2

您需要创建一个随机数生成器函数并每次调用它。

var randomNumber = function(){
  return Math.floor(Math.random() * colors.length)
}

然后

document.getElementById('cirkel1').style.backgroundColor = color[randomNumber()];

demo

Answer 3

这对我有用，但你只是更新了第一个圆圈。

document.getElementById('cirkel1').style.background = random_color;

如果我将代码更改为：

var colors = ['#ff0000', '#00ff00', '#0000ff'];
function randomColor(){
    return colors[Math.floor(Math.random() * colors.length)];
}
document.getElementById('cirkel1').style.background = randomColor();
document.getElementById('cirkel2').style.background = randomColor();
document.getElementById('cirkel3').style.background = randomColor();
document.getElementById('cirkel4').style.background = randomColor();

我得到了不同的颜色。

这会将random_colour更改为函数。

这是jsFiddle：http://jsfiddle.net/kgjertsen/mf7myuxs/

javascript颜色随机数发生器不起作用

3 个答案: