码迷,mamicode.com
首页 > 其他好文 > 详细

标签随机颜色的展示

时间:2017-08-24 14:53:51      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:var   使用   hot   ror   技术分享   java   script   javascrip   and   

技术分享

//调用热门标签的列表接口
       $.ajax({
           url: getv1 + ‘/index/tag/hotTags‘,
           type: ‘GET‘,
           dataType: ‘json‘,
           data: { inscode: jxinscode },
           success: function(res) {
               var labellen = res.data.length;
               if (labellen > 0) {
                   var lalist = "";
                   for (var i = 0; i < labellen; i++) {
                       var laname = res.data[i].name; //标签名称
                       var latimes = res.data[i].times; //标签使用次数
                       lalist += ‘<span class="label">‘ + laname + ‘<span>(‘ + latimes + ‘)</span></span>‘;

                   }
                   $(".labellist").append(lalist);
                   //标签颜色随机显示
                   var labelindex = $(".label").length;
                   var colorList = ["#9dc6eb", "#f8c471", "#b9a3ef", "#fdb1ca", "#9dc6eb", "#f8c471", "#b9a3ef", "#fdb1ca"];
                   for (var i = 0; i < labelindex; i++) {
                       var bgColor = getColorByRandom(colorList);
                       $(".label").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;
                   }
               }
           },
           error: function(res) {

           }
       });

  

标签随机颜色的展示

标签:var   使用   hot   ror   技术分享   java   script   javascrip   and   

原文地址:http://www.cnblogs.com/yesu/p/7422791.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!