js实现颜色随机的标签列表

最新推荐文章于 2023-01-11 14:53:53 发布

weixin_33953249

最新推荐文章于 2023-01-11 14:53:53 发布

阅读量258

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/liangwt/blog/777635

版权

2019独角兽企业重金招聘Python工程师标准>>>

效果图如下图：

html 的代码如下

<html>
<body>
<p class="blog-post-meta">
    <span class="label">no.1</span> 
    <span class="label">no.2</span>
    <span class="label">no.3</span>
    <span class="label">no.4</span>
</p>
</body>
</html>

javascript中先提前预设好变量，之后随机选取一个作为span的类，即可实现颜色随机的标签列表

$(function(){

	//为标签附颜色
	var tagClass = ["label-default","label-primary","label-success","label-warning","label-danger","label-info"];
	
	$(".blog-post-meta > span").each(function(i){
		var index = Math.floor(Math.random()*tagClass.length);
		$(this).addClass(tagClass[index]);
	})
};

转载于:https://my.oschina.net/liangwt/blog/777635