js从10种颜色中随机取色实现每次取出不同的颜色

JavaScript07

js从10种颜色中随机取色实现每次取出不同的颜色,第1张

昨天在做js

从10种颜色中随机取色，并每次取出的颜色不同的时候，考虑了很多，最终用如下来实现：

复制代码

代码如下:

var

colorList

=

["#FFFF99","#B5FF91","#94DBFF","#FFBAFF","#FFBD9D","#C7A3ED","#CC9898","#8AC007","#CCC007","#FFAD5C"]

for(var

i=0i<lineList.lengthi++){

var

bgColor

=

getColorByRandom(colorList)

}

function

getColorByRandom(colorList){

var

colorIndex

=

Math.floor(Math.random()*colorList.length)

var

color

=

colorList[colorIndex]

colorList.splice(colorIndex,1)

return

color

}

这样便能每次取出的颜色是随机的且都不一样

收集一个函数：获取随机颜色值

复制代码

代码如下:

function

getRandomColor(){

return

"#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6)

}

说明：

1、16777215为16进制的颜色ffffff转成10进制的数字

2、>>数字取整

3、转成16进制不足6位的以0来补充

在线演示代码：

js随机颜色

document.writeln('#'+('00000'+(Math.random()*0x1000000

创建三个类名，三个类名分别给上三个背景颜色，如：

.bgColor0{background-color:#158AEA}

.bgColor1{background-color:#996633}

.bgColor2{background-color:#66FF00}

获取012三个随机数前面添加字符串'bgColor'就得到随机的类名，然后给相应的元素添加得到的随机类名就行了。

而要获取012三个随机数就用Math.floor(Math.random()*3)获取。

不过你要求背景色不能重复，那么就把三个类名放进一个数组里。已经使用的类名就用”数组名.shift“把它从数组中弹出。然后剩下的两个类名就要获取01两个随机数，就用Math.floor(Math.random()*2)获取0和1其中一个数。

剩下的你知道该怎么做了。