前段时间网站小改版了下，右侧新增了“TAGS信息标签”功能，目的是方便用户查找自己需要的文章。可是后来却发现，虽然洒家列举了些比较重要的标签，但用户在浏览时还是会忽略掉，这可如何是好呢？洒家想了想，字体颜色不突出可能有一点原因吧，于是毅然用jquery写了一段代码，实现了字体随机颜色与随机大小，这样看上去花花绿绿的，总该更醒目了些吧。来放一张效果对比图：

下面来放一段上述效果的实例源码：

<ol class="ol" style="user-select: text !important; margin: 0px; padding: 5px 0px 5px 40px; list-style: none;"><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;head&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;title&gt;帝国cms调用TAGS信息标签实现字体随机颜色和随机大小变化--艺灵设计，qq群：231749938&lt;/title&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;meta name=&quot;author&quot; content=&quot;艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com&quot;&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;meta name=&quot;keywords&quot; content=&quot;帝国cms调用TAGS信息标签,TAGS信息标签实现随机字体大小,TAGS信息标签实现随机颜色,tagsinfo&quot;&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;style type=&quot;text/css&quot;&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">*{margin:0;padding:0}</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">a,a:hover{display:inline-block;color:#666;font-size:12px;font-family:Arial;outline:none;text-decoration:none;}</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">div.cont_r_newlist{width:284px;margin:0 auto}</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">div.cont_r_newlist a{position:relative;padding-right:5px;}</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;/style&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;/head&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;base href=&quot;http://www.yilingsj.com&quot; /&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;body&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;div class=&quot;cont_r_newlist&quot;&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;div class=&quot;h3&quot;&gt;&lt;h3&gt;随机标签&lt;/h3&gt;&lt;/div&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;a href=&quot;/e/tags/?tagid=417&quot; target=&quot;_blank&quot; title=&quot;淘宝全屏海报代码生成器&quot;&gt;淘宝全屏海报代码生成器&lt;/a&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;a href=&quot;/e/tags/?tagid=156&quot; target=&quot;_blank&quot; title=&quot;淘宝店铺装修&quot;&gt;淘宝店铺装修&lt;/a&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;a href=&quot;/e/tags/?tagid=399&quot; target=&quot;_blank&quot; title=&quot;c店完全自定义&quot;&gt;c店完全自定义&lt;/a&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;a href=&quot;/e/tags/?tagid=404&quot; target=&quot;_blank&quot; title=&quot;全屏模版框架&quot;&gt;全屏模版框架&lt;/a&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;a href=&quot;/e/tags/?tagid=405&quot; target=&quot;_blank&quot; title=&quot;footer-more-trigger&quot;&gt;footer-more-trigger&lt;/a&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;a href=&quot;/e/tags/?tagid=151&quot; target=&quot;_blank&quot; title=&quot;悬浮代码&quot;&gt;悬浮代码&lt;/a&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;a href=&quot;/e/tags/?tagid=140&quot; target=&quot;_blank&quot; title=&quot;鼠标滑过特效&quot;&gt;鼠标滑过特效&lt;/a&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;a href=&quot;/e/tags/?tagid=408&quot; target=&quot;_blank&quot; title=&quot;sn-simple-logo&quot;&gt;sn-simple-logo&lt;/a&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;a href=&quot;/e/tags/?tagid=100&quot; target=&quot;_blank&quot; title=&quot;导航特效&quot;&gt;导航特效&lt;/a&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;a href=&quot;/e/tags/?tagid=104&quot; target=&quot;_blank&quot; title=&quot;遮罩层特效&quot;&gt;遮罩层特效&lt;/a&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;a href=&quot;/e/tags/?tagid=286&quot; target=&quot;_blank&quot; title=&quot;修改改淘宝销量&quot;&gt;修改改淘宝销量&lt;/a&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;a href=&quot;/e/tags/?tagid=179&quot; target=&quot;_blank&quot; title=&quot;10px问题&quot;&gt;10px问题&lt;/a&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;a href=&quot;/e/tags/?tagid=114&quot; target=&quot;_blank&quot; title=&quot;二级下拉菜单&quot;&gt;二级下拉菜单&lt;/a&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;a href=&quot;/e/tags/?tagid=97&quot; target=&quot;_blank&quot; title=&quot;京东店铺装修&quot;&gt;京东店铺装修&lt;/a&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;a href=&quot;/e/tags/?tagid=284&quot; target=&quot;_blank&quot; title=&quot;淘宝漏洞&quot;&gt;淘宝漏洞&lt;/a&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;a href=&quot;/e/tags/?tagid=81&quot; target=&quot;_blank&quot; title=&quot;鼠标跟随&quot;&gt;鼠标跟随&lt;/a&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;a href=&quot;/e/tags/?tagid=391&quot; target=&quot;_blank&quot; title=&quot;显示已隐藏的店招&quot;&gt;隐藏的店招/模块&lt;/a&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;a href=&quot;/e/tags/?tagid=112&quot; target=&quot;_blank&quot; title=&quot;jq特效&quot;&gt;jq特效&lt;/a&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;a href=&quot;/e/tags/?tagid=47&quot; target=&quot;_blank&quot; title=&quot;ie6 bug&quot;&gt;ie6 bug&lt;/a&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;a href=&quot;/e/tags/?tagid=348&quot; target=&quot;_blank&quot; title=&quot;css3属性&quot;&gt;css3属性&lt;/a&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;a href=&quot;/e/tags/?tagid=50&quot; target=&quot;_blank&quot; title=&quot;css3边框阴影&quot;&gt;css3边框阴影&lt;/a&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;a href=&quot;/e/tags/?tagid=87&quot; target=&quot;_blank&quot; title=&quot;css3动画&quot;&gt;css3动画&lt;/a&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;a href=&quot;/e/tags/?tagid=299&quot; target=&quot;_blank&quot; title=&quot;积分问题&quot;&gt;积分问题&lt;/a&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;a href=&quot;/e/tags/?tagid=77&quot; target=&quot;_blank&quot; title=&quot;flash动画&quot;&gt;flash动画&lt;/a&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;/div&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;script type=&quot;text/javascript&quot; src=&quot;/skin/yilingsj/js/jquery-1.8.3.min.js&quot;&gt;&lt;/script&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;script language=&quot;javascript&quot;&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">$(function(){</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">var $c_a=$(&#39;div.cont_r_newlist a&#39;);<span class="c999" style="user-select: text !important; color: #999999;">/*定义简写样式名*/</span></li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">for(var i=0;i&lt;$c_a.length;i++)&nbsp;<span class="c999" style="user-select: text !important; color: #999999;">/*遍历a的个数,可用alert(c_a.length);测试结果为24个*/</span></li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">{var str=&quot;0123456789ABCDEF&quot;;<span class="c999" style="user-select: text !important; color: #999999;">/*枚举颜色组合基数*/</span></li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">var c=&quot;#&quot;;<span class="c999" style="user-select: text !important; color: #999999;">/*颜色前面+#*/</span></li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">for(var j=0;j&lt;6;j++)<span class="c999" style="user-select: text !important; color: #999999;">/*颜色由6位组成，循环6次输出一组颜色*/</span></li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">{c=c+str.charAt(Math.random()*str.length);}<span class="c999" style="user-select: text !important; color: #999999;">/*颜色组合数为：16^6=256^3*/</span></li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">var size=parseInt(Math.random()*(20)+8);<span class="c999" style="user-select: text !important; color: #999999;">/*字体大小范围在[8,28)，左闭右开*/</span></li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">$c_a.eq(i).css({color:c}).stop().animate({&#39;font-size&#39;:size},500);<span class="c999" style="user-select: text !important; color: #999999;">/*遍历a并增加对应的颜色和字体大小属性*/</span></li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">}</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">});</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;/script&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;/body&gt;</li><li style="user-select: text !important; margin: 0px; padding: 0px 10px; border-left: 2px solid rgb(0, 166, 80); line-height: 24px; list-style-type: decimal; font-family: 微软雅黑; position: relative;">&lt;/html&gt;</li></ol>

每次刷新时，字体大小与颜色都会发生变化，颜色相同的概率是千万分之一。话说颜色相同的概率是：16^6分之一*a*n，也就是256^3分之一*a*n。如果哪天亲刷新出3个以上同色的话，建议亲去买彩票哦，一不小心就中500万啦！

转载请注明：网页阁吧 » 帝国cms调用TAGS信息标签实现字体随机颜色和随机大小变化