js實現的隨機顏色實例代碼：有時候需要對顏色隨機取值，或者類似功能的擴展，具體場景這裡就不介紹了，直接看代碼。代碼實例如下: 螞蟻部落 以上代碼實現了隨機顏色效果，下麵簡單介紹一下此效果的實現過程。一.實現原理:首先創建一個數組，數組中存放的就是顏色值，然後通過Math.random...
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/
