JavaScript实现云标签

 

其实很简单了，这次写了，保存起来，为了防止下次再写重复的代码~~~

 

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript实现云标签</title>
<style>
.box-tags {width:400px;margin:50px auto;padding:20px;border:1px solid #eee;background-color:#f9f9f9;}
.box-tags a {margin:5px;padding:5px 10px;display:inline-block;*zoom:1;vertical-align:middle;background-color:#666;color:#fff;font-size:14px;text-decoration:none;}
.box-tags .tag-bg-1 {background-color:#f00;}
.box-tags .tag-bg-2 {background-color:#f40;}
.box-tags .tag-bg-3 {background-color:#f70;}
.box-tags .tag-bg-4 {background-color:#f90;}
.box-tags .tag-bg-5 {background-color:#3cf;}
.box-tags .tag-bg-6 {background-color:#369;}
.box-tags .tag-bg-7 {background-color:#690;}
.box-tags .tag-bg-8 {background-color:#06F;}
.box-tags .tag-bg-9 {background-color:#F33;}
.box-tags .tag-bg-10 {background-color:#039;}
.box-tags .tag-bg-11 {background-color:#004080;}
.box-tags .tag-bg-12 {background-color:#66F;}
.box-tags .tag-bg-13 {background-color:#C06;}
.box-tags .tag-bg-14 {background-color:#0080C0;}
.box-tags .tag-bg-15 {background-color:#804040;}
.box-tags .tag-bg-16 {background-color:#004000;}
.box-tags .tag-bg-17 {background-color:#008040;}
.box-tags .tag-bg-18 {background-color:#4B1F9E;}
.box-tags .tag-bg-19 {background-color:#888;}
.box-tags .tag-bg-20 {background-color:#377302;}
</style>
</head>

<div id="tags" class="box-tags">
    <a href="#">波多野结衣</a>
    <a href="#">天海翼</a>
    <a href="#">吉沢明步</a>
    <a href="#">早乙女露依</a>
    <a href="#">椎名由奈</a>
    <a href="#">樱井莉亚</a>
    <a href="#">大桥未久</a>
    <a href="#">苍井空</a>
    <a href="#">松岛枫</a>
    <a href="#">水菜丽</a>
    <a href="#">早川濑里奈</a>
    <a href="#">石川铃华</a>
    <a href="#">橘梨纱</a>
    <a href="#">美竹凉子</a>
    <a href="#">上原结衣</a>
    <a href="#">村上里沙</a>
    <a href="#">麻生希</a>
    <a href="#">千田理子</a>
    <a href="#">爱川美里菜</a>
    <a href="#">Julia 京香</a>
    <a href="#">濑亚美莉</a>
    <a href="#">小野纱里奈（桥本舞）</a>
    <a href="#">小川阿佐美</a>
    <a href="#">冬月枫</a>
    <a href="#">纹舞兰</a>
    <a href="#">朝美穗香</a>
    <a href="#">春咲梓美</a>
    <a href="#">樱理惠</a>
    <a href="#">上原瑞穂</a>
    <a href="#">加藤莉娜</a>
    <a href="#">伊泽千夏</a>
</div>


<script>
window.onload = function() {
    var tags = document.getElementById("tags").getElementsByTagName("a"),
        len = tags.length;        
    for (var i=0; i<len; i++) {
        var num = Math.floor(Math.random() * 20) + 1;    //生产1~20随机数字
        tags[i].className = "tag-bg-" + num;
    }
}
</script>

<body>
</body>
</html>

 

posted @ 2014-08-06 16:56  赵小磊  阅读(845)  评论(1)    收藏  举报
回到头部