利用JavaScript和CSS实现多彩tag标签

我相信很多朋友都喜欢在博客的右侧安排一个区块来放置网站的tag标签，对于做SEO的博主们来说，这可以起到很好的SEO作用，但是想要tag标签更漂亮怎么办？一般普遍的做法是利用js+css来实现，以下以zblog为例。

例如：代码如下

<script type="text/javascript"> 
    $(document).ready(function() { 
        var tags_a = $("#tags a"); 
        tags_a.each(function(){ 
        var x = 9; 
        var y = 0; 
        var rand = parseInt(Math.random() * (x - y + 1) + y); 
        $(this).addClass("tags"+rand); }); 
    })  </script>

#tag .tags0{background-color: #CC3300;}
#tag .tags1{background-color: #CC3300;}
#tag .tags2{background-color: #339900;}
#tag .tags3{background-color: #FF9933;}
#tag .tags4{background-color: #0099CC;}
#tag .tags5{background-color: #00CCCC;}
#tag .tags6{background-color: #99CC66;}
#tag .tags7{background-color: #339999;}
#tag .tags8{background-color: #FF6699;}
#tag a:hover{color:#FFFFFF;text-decoration:none;background-color: #4097db;}

以上方式能够实现多彩tag，但像小编这样懒的人，写这么多的css颜色样式，实在有点太为难，所以下面列出小编所用的方式

js代码

 $('#tags a').each(function(){
     var tagcolor=new Array("#C01E22","#0088cc","#FF5E52","#2CDB87","#00D6AC","#EA84FF","#FDAC5F","#FD77B2","#0DAAEA","#C38CFF","#FF926F","#8AC78F","#C7C183","#9370DB","#2f889a","#9e5ae2");//颜色数组
     var cou=Math.floor(Math.random()*tagcolor.length+1)-1;//生成随机数，用于抽取颜色
     $(this).css({
         'color':tabcolor[cou]
     })
  })

微信扫码查看本文