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

发布时间:2018-03-14作者:laosun阅读(2208)

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

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

    直接上代码,很简单

    //标签获取字体颜色和大小
    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代码

    看效果图

    网站标签


3 +1

版权声明

 jquery  前端

 请文明留言

1 条评论