js实现的随机颜色范例代码

js实现的随机颜色实例代码

js实现的随机颜色实例代码：
有时候需要对颜色随机取值，或者类似功能的扩展，具体场景这里就不介绍了，直接看代码。
代码实例如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="author" content="http://www.softwhy.com/" /> 
<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的Array对象的splice()方法一章节。
5.setInterval()函数可以参阅setInterval()函数用法详解一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9749

更多内容可以参阅:http://www.softwhy.com/javascript/

1楼linyanfang: 虽然是简单的功能，但是逻辑清楚

js实现的随机颜色范例代码

相关推荐