js代码:
$(document).ready(function() {
var tags_a = $("#tags a");
tags_a.each(function(){
var x = 9;
var y = 0;
var rand = parseInt(Math.random() * (x - y + 1) + y);
$(this).addClass("tags"+rand);
});
})
css样式:
a{ color:#333333; text-decoration:none;}
.taglist{ width:250px;overflow:hidden;border:#dddddd solid 1px;}
.taglist .tit{ width:100%; height:24px; line-height:24px; background-color:#565662;}
.taglist .tit a{ padding-left:8px; color:#ffffff;}
#tags a{height:26px; line-height:26px;padding-right:6px;}
#tags .tags0{}
#tags .tags1{color:#C00; font-size:24px;}
#tags .tags2{color:#030; font-size:16px;}
#tags .tags3{color:#00F;}
#tags .tags4{ font-size:16px;}
#tags .tags5{color:#C00; font-size:20px;}
#tags .tags6{color:#F06 font-size:20px;}
#tags .tags7{color:#030; font-weight:bold; font-size:18px;}
#tags .tags8{color:#F06; font-weight:bold;}
#tags .tags9{color:#C00; font-weight:bold;font-size:16px;}
#tags a:hover{ color:#F00; text-decoration:underline;}
html代码:
<div class="cont" id="tags">
<a href="https://www.xcxin.top/jQuery" target="_blank" class="tags3">jQuery</a>
<a href="https://juejin.cn/tag/MYSQL" target="_blank" class="tags9">MYSQL</a>
<a href="https://juejin.cn/tag/java" target="_blank" class="tags5">java</a>
<a href="https://juejin.cn/tag/前端开发" target="_blank" class="tags6">前端开发</a>
<a href="https://juejin.cn/tag/数据库" target="_blank" class="tags2">数据库</a>
<a href="https://juejin.cn/tag/html" target="_blank" class="tags9">html</a>
</div>
代码效果: