琢磨了一会儿,看着页面不爽,就决定自动手制作了一个可以让标签集合模块能够以随机背景颜色的方式来显示,方法很简单,网上也有很多相关的介绍,看了一下,然后还是根据自己这里的实际情况来重新编写了一下,感觉这样会简单一些。

准备工作

首先页面上要有标签集合,可以看看本站侧边栏,就是这样的一个集合了本站所有标签进行展示的区域,基本上现在大部分博客,CMS,论坛等程序都会有这个功能。

其次,我这里是使用了jQuery的方式来设计的,所以这里注意一下,代码本身没有问题,如果出现错误,请检查是否引入了Jquery.

下面是代码

 //标签颜色随机显示
   var labelindex = $(".tag").length;
   var colorList = ["#0ad2ad", "#94db4c", "#FF4081", "#FFD460", "#a44ee8", "#ff8a00", "#1dedff", "#ff0081","#1dedff", "#f8c471", "#b9a3ef", "#fdb1ca", "#9dc6eb", "#f8c471", "#b9a3ef", "#fdb1ca","#9dc6eb", "#f8c471", "#b9a3ef", "#fdb1ca", "#9dc6eb", "#f8c471", "#b9a3ef", "#fdb1ca"];
  for (var i = 0; i < labelindex; i++) {
    var bgColor = getColorByRandom(colorList);
    $(".tag").eq(i).css("background", bgColor);
     }
  function getColorByRandom(colorList) {
       var colorIndex = Math.floor(Math.random() * colorList.length);
      var color = colorList[colorIndex];
       colorList.splice(colorIndex, 1);
                return color;
        }


***注意

其中有2处  $(".tag")  这样的位置,需要改成你自己的标签的class名,

然后将这些代码复制,粘贴到你的页面中的JS代码部分,注意要先引入jQuery文件,然后再放代码。注意这个先后顺序就可以了,保存之后,返回前端,刷新页面,马上就可以看到效果。


如果觉得颜色不够丰富,你还可以在代码中继续增加你自己喜欢的颜色,是不是很人性化?