jquery实现的随机多彩tag标签

221 阅读1分钟

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>

代码效果:

334.png