党娟博客

javascript生成随机颜色,可自定义调整明度/饱和度

在制作饼图或标签云时,我们通常需要很多颜色,但是通常的生成随机颜色方法,明度和饱和度不好控制,以下是教程能够轻松控制明度和饱和度。

<!doctype html>

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<style type="text/css"> 

body { font-size:12px; font-family:"Courier New", Courier, monospace; letter-spacing:5px; } 

ul { list-style:none; } 

li { width:120px; height:60px; line-height:60px; vertical-align:middle; text-align:center; float:left; margin-left:20px;color:#fff; } 

</style> 

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 

<title>javascript生成随机颜色</title> 

<script type="text/javascript"> 

$(function(){ 

$("ul li").each(function(){ 

$(this).css("background-color",getRandomColor()); 

}); 

}) 

function getRandomColor() 

var bgc = '#'; 

var bgcArray = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F']; 

for(var i = 0; i < 6;i++) 

var bgcIndex = Math.round(Math.random()*11); //此处调整数值以改变颜色明度及饱和度

bgc += bgcArray[bgcIndex]; 

return bgc; 

</script> 

</head> 

<body> 

<div> 

<ul> 

<li>色块</li> 

<li>色块</li> 

<li>色块</li> 

<li>色块</li>

<li>色块</li> 

<li>色块</li> 

<li>色块</li> 

<li>色块</li> 

</ul> 

</div> 

</body> 

</html>



发表我的评论

Hi,您需要填写昵称和邮箱!

  • 必填项