bootstrap4超简单的随机颜色标签云

效果：

效果

html：

……

<div class="w-100 tags">

<a href="link" class="badge badge-info p-2" style="background:#00557f">tagstext]</a>

<a href="link" class="badge badge-info p-2" style="background:#00557f">tagstext]</a>

<a href="link" class="badge badge-info p-2" style="background:#00557f">tagstext]</a>

<a href="link" class="badge badge-info p-2" style="background:#00557f">tagstext]</a>

</div>

……

jq代码

<script>

    var labelindex = $(".tags>a").length;

    var colorList = ["#9dc6eb", "#f8c471", "#b9a3ef", "#fdb1ca", "#9dc6eb", "#f8c471", "#b9a3ef", "#fdb1ca"];

    for (var i = 0; i < labelindex; i++) {

        var bgColor = getColorByRandom(colorList);

        $(".tags>a").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;

    }

</script>