随机标签，随机文字颜色和字体大小的实现方法

发布时间：2018-03-14作者：laosun阅读（6040）

看本站博客，右侧有个标签栏，字体颜色、字体大小和位置都是随机的

直接上代码，很简单

//标签获取字体颜色和大小
function getColor() {
	var colorElements = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
	var colorArray = colorElements.split(",");
	var color = "#";
	for (var i = 0; i < 6; i++) {
		color += colorArray[Math.floor(Math.random() * 16)];
	}
	return color;
}
function getSize(){
	return Math.floor(Math.random() * (30 - 10) + 10);
}
function getTagHtml(tagArr){
	var html = '';
	if(tagArr!=null && tagArr.length>0){
		tagArr.sort(function(){ return 0.5 - Math.random() })
		for(var i=0;i<tagArr.length;i++){
			var color = getColor();
			var size = getSize();
			html += '<a href="${ctx!}/tag/search.action?tag='+tagArr[i]+'" style="color:'+color+'; font-size:'+size+'px;">'+tagArr[i]+'</a>';
		}
	}
	$("#tags").html(html);
}
//至于参数tagArr,你就new一个数组即可,将后台取出的数据放入数组传入getTagHtml()方法！
var tagArr = new Array();
tagArr.push('AAA');
tagArr.push('BBB');

你只需要根据你自己的div布局，设置一个id = tags 属性即可，另外根据需求更改js 内的 html代码

看效果图

网站标签