你的位置:首页 > Java教程

[Java教程]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/