效果圖如下圖:
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]);
})
};