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

JavaScript010

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

}

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

首先你必须知道表达颜色的几种方式

1、通过英文单词 如：green

2、通过十六进制 如：#ffffff

3、通过rgb 如：RGB(255,255,255)

如果是通过英文单词的话，可以通过自定义一些颜色英文单词数组，然后从数组中随机取值，然后赋值给标签相关属性就可以了。如果是通过第二种方式的话，可以通过js里面的随机函数Math.random()拼接一个十六进制的数字。同样，在第三种方案也是通过系统随机函数来构造颜色。

至于字体的话，同理。不过只能采用自定义的方案了。

1.首先架构一下网页的样式,既然是举例,那么就简单写入四个 span 用来做我们的文字存放,和之后的对比

2.我们首先用最初的 css 方式来给这些文字添加样式直接用 color 这个属性就可以控制文字的颜色就可以看到生效之后的效果

3.但是如果有很多不同的,颜色组成还可以这么写嘛,答案肯定是不行的。那么我们就用 js 来控制首先写一个 script 标签；里面 定义一个 数组 colors，存放 值 也就是 文字；而 下标 就可用来表示 颜色；

4.然后我们用一个循环来将，下标 和 分别存放到 span 标签中去；然后就会将三个不同的 span 写入页面；（第四个 span 是间隔用的 并无什么意义）

5.然后我们对比一下两个不同方式的页面代码量，咋一看 感觉并没什么差别，但是如果，颜色更多那？？？，图一只需要添加几个 下标 和值 ，但是图二那？（图一那个 span 并无意义）。