js随机颜色实例代码
分类：实例代码
有时候需要对颜色随机取值，或者类似功能的扩展，具体场景这里就不介绍了，直接看代码。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#thediv{
width:100px;
height:100px;
}
</style>
<script type="text/javascript">
var colorList=["#FFFF99","#B5FF91","#94DBFF","#FFBAFF","#FFBD9D","#C7A3ED","#CC9898","#8AC007"];
for(var i=0;i<colorList.length;i++){
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;
}
window.onload=function(){
var odiv=document.getElementById("thediv");
function func(){
odiv.style.backgroundColor=getColorByRandom(colorList);
}
setInterval(func,1000);
}
</script>
</head>
<body>
<div id="thediv"></div>
</body>
</html>
以上代码实现了随机颜色效果，下面简单介绍一下此效果的实现过程。
一.实现原理:
首先创建一个数组，数组中存放的就是颜色值，然后通过Math.random()乘以数组的长度获取数组的随机索引值，然后用这个索引值就获取数组的中存放的颜色值。并且通过splice()函数删除此颜色值，以防止会被重复，最后使用定时器函数每隔一秒取一次颜色值。
二.相关阅读:
1.for循环可以参阅javascript for in循环语句一章节。
2.Math.floor()函数可以参阅javascript Math.floor()方法一章节。
3.Math.random()函数可以参阅javascript Math.random()方法一章节。
4.splice()函数可以参阅javascript splice()方法一章节。
5.setInterval()函数可以参阅setInterval()函数一章节。
js随机颜色实例代码，这样的场景在实际项目中还是用的比较多的，关于js随机颜色实例代码就介绍到这了。
js随机颜色实例代码属于前端实例代码，有关更多实例代码大家可以查看。