使用JS生成随机的Web安全色

  •   
  • 8315
  • jQuery
  • 29
  • super_dodo
  • 2016/10/14

今天想到需要给每篇文章加上标签,类似标签云,但是统一色调的标签云不美观。这个时候就想到了随机生成每个标签的背景颜色。请看示例图片：

如果想知道网站的配色方案请异步浏览WEB网站网页设计常用色彩搭配表

tag_safe_color
获取随机颜色

function getRandomColor() {
	return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6); 
}

&#91;/php&#93;

获取随机安全色:这里使用16进制来表示颜色，例如白色的#FFFFFF，黑色的#000000，Web安全色主要由00，33，66，99，CC，FF组成，因此，总的颜色总数就是6*6=216种，先产出所有可能的情况(216种)，放于数组中，然后再生成一个1-216的随机数，最后使用array&#91;random&#93;的形式随机返回一个数组成员，就算成功了。下面贴出代码：

&#91;php&#93;
function getRandomSafeColor() {
	var base = &#91;'00','33','66','99','CC','FF'&#93;;     //基础色代码
	var len = base.length;                          //基础色长度
	var bg = new Array();                           //返回的结果
	var random = Math.ceil(Math.random()*215+1);    //获取1-216之间的随机数
	var res;
	for(var r = 0; r < len; r++){  
		for(var g = 0; g < len; g++){  
			for(var b = 0; b < len; b++){   
				bg.push('#'+base&#91;r&#93;.toString()+base&#91;g&#93;.toString()+base&#91;b&#93;.toString());
			}  
		};  
	};
	for(var i=0;i<bg.length;i++){
		res =  bg&#91;random&#93;;
	}
	return res;
}
&#91;/php&#93;


二者的应用也很简单，比如给某个元素设置背景色：
&#91;php&#93;
document.getElementById('btn-load').style.background = getRandomColor();
document.getElementById('btn-load').style.background = getRandomSafeColor();
&#91;/php&#93;
结束语:随机颜色应用还挺广泛的，比如各类网站的标签云,最后放出一个Web安全色的网站，里面颜色很纯正，适合应用于各类设计.也可以查看一些固定的风格的色彩组装成色彩组，随机取。

<img src="http://www.dodobook.net/wp-content/uploads/2016/10/Web_tag20161014175506.png" alt="Web_tag20161014175506" width="433" height="219" class="alignnone size-full wp-image-3093" />

完整示例HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用JS生成随机的Web安全色</title>
	<style type="text/css">
		div{font-family:"Microsoft Yahei";font-size:16px;color:#fff;width:100px;line-height:50px;padding:0 10px;float:left;margin: 5px;text-align:center;border-radius: 5px;}
	</style>
</head>
<body>
	<div id="btn-load-0">读读书</div>
	<div id="btn-load-1">PHP</div>
	<div id="btn-load-2">MySQL</div>
	<div id="btn-load-3">HTML5</div>
	<div id="btn-load-4">Yii2</div>
	<div id="btn-load-5">螃蟹壳</div>
	<div id="btn-load-6">小蚁窝</div>
	<div id="btn-load-7">黑山老妖</div>

	<script type="text/javascript">

		//获取随机颜色就一行代码
		function getRandomColor() {
			return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6); 
		}

		//获取随机安全色
		function getRandomSafeColor() {
			var base = &#91;'00','33','66','99','CC','FF'&#93;;     //基础色代码
			var len = base.length;                          //基础色长度
			var bg = new Array();                           //返回的结果
			var random = Math.ceil(Math.random()*215+1);    //获取1-216之间的随机数
			var res;
			for(var r = 0; r < len; r++){  
				for(var g = 0; g < len; g++){  
					for(var b = 0; b < len; b++){   
						bg.push('#'+base&#91;r&#93;.toString()+base&#91;g&#93;.toString()+base&#91;b&#93;.toString());
					}  
				};  
			};
			for(var i=0;i<bg.length;i++){
				res =  bg&#91;random&#93;;
			}
			return res;
		}

		document.getElementById('btn-load-0').style.background = getRandomColor();
		document.getElementById('btn-load-1').style.background = getRandomSafeColor();
		document.getElementById('btn-load-2').style.background = getRandomSafeColor();
		document.getElementById('btn-load-3').style.background = getRandomSafeColor();
		document.getElementById('btn-load-4').style.background = getRandomSafeColor();
		document.getElementById('btn-load-5').style.background = getRandomSafeColor();
		document.getElementById('btn-load-6').style.background = getRandomSafeColor();
		document.getElementById('btn-load-7').style.background = getRandomSafeColor();

	</script>
</body>
</html>