逢十換行，帶顏色變化

標簽：

Html/CSS JavaScript

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            position: relative;
        }
        .box {
            width: 100px;
            height: 100px;
            margin-top: 20px;
            position: absolute;
            text-align: center;
            line-height: 100px;
            background-color: #eee;
        }
        .red {
            background-color: red;
        }
        .yellow {
            background-color: yellow;
        }
        .blue {
            background-color: blue;
        }
    </style>
</head>
<body>
    <!--<input type="button" value="点击生成10个Li">-->
    <input type="button" value="点击生成100个Li">
</body>
<script>
    var oBtn = document.getElementsByTagName('input')[0];
    var aLiArr = ['red','yellow','blue'];
    //设定盒子的数组
    var aDiv = document.getElementsByTagName('div');

    //生成100个Li，逢10换行
    oBtn.onclick = function () {
        //定义所生成盒子的类名
        var num1 = 0;
        for( var j=0;j<100;j++) {
            document.body.innerHTML += '<div class="box" >' + j + '</div>';
        }
        for( var i=0;i<aDiv.length;i++ ){
            if(i%10==0){
                aDiv[i].style.left=10 + 'px';
                aDiv[i].style.top=10+ i*11 + 'px';
                var temp = aDiv[i].style.top;
            }else{
                aDiv[i].style.left = 10+i%10*110 + 'px';
                aDiv[i].style.top = temp;
            }
            if( num1 == 3 ){
                num1 = 0;
            }
            aDiv[i].className = 'box' + ' ' +aLiArr[num1];
            num1++;
        }
    }

</script>
</html>

點擊查看更多內(nèi)容