发布时间: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代码
看效果图
版权属于: 技术客
原文地址: https://www.sunjs.com/article/detail/d0538ef9606e4399a4c81408307a6cfa.html
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。