js隨機顏色例項程式碼

admin發表於2017-11-01
JS隨機

有時候需要對顏色隨機取值，或者類似功能的擴充套件，具體場景這裡就不介紹了，直接看程式碼。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!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 splice()方法一章節。 

5.setInterval()函式可以參閱setInterval()函式一章節。

相關文章