Question

我的要求是我必须使用3种颜色动态设置div。我用应用此代码的随机颜色完成了它

function randomColors() {

var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 4; i++ ) {
    color += letters[Math.round(Math.random() * 15)];
}
return color;

}

我只需重复3种颜色，这将动态循环！我怎么能这样做？

我只想动态设置这3种颜色＃09c5f9，＃05f6d5，＃a42cff。

for(i=1; i <= pmap; i++){
      $("#thumbnail"+i).css("background-color",randomColors());
}

Answer 1

我可以想到两种方法。

1）最简单的方法是使用jQuery（在我看来，正确的方法）是声明三个类并使用jQuery交换它们。

CSS：

.teal{
    background-color: #09c5f9;
}
.emerald{
    background-color: #05f6d5;
}
.purple{
    background-color: #a42cff;
}

和javascript：

$("#some-element").removeClass("teal emerald").addClass("purple");
$("#some-element").removeClass("teal purple").addClass("emerald");
$("#some-element").removeClass("purple emerald").addClass("teal");

2）这种方式使用裸机JS，并使用与原帖相同的编程风格。

var colors = ["#09c5f9", "#05f6d5", "#a42cff"];

function getColor(colorNumber){
    return colors[colorNumber];
}

希望这有帮助。

Answer 2

function randomColors() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 3; i++ ) {
    color += letters[Math.round(Math.random() * 15)];
}
return color;
}

你可以看到Demo，其中div的背景颜色会随机设置。

Demo

你可以从那里接受提示。

用动态设置3种颜色的div

2 个答案: