for计算位置坐标

代码1效果图：

代码2效果图：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                width: 50px;
                height: 50px;
                background: red;
                position: absolute;
                top: 0;
                left: 0;
                font-size: 30px;
                text-align: center;
                line-height: 50px;
                color: #fff;
            }
        </style>

        <script>
            window.onload = function() {
                var aDiv = document.getElementsByTagName('div');
                //先创建div
                for(var i = 0; i < 20; i++) {
                    document.body.innerHTML += '<div>' + i + '</div>';
                }
                //再查找div的位置
                for(var i = 0; i < 10; i++) {
                    aDiv[i].style.left = 20 + i * 60 + 'px';
                    //                    aDiv[i].style.top = 10 + i * 50 + 'px';
                }
                //位置调整
                for(var i = 10; i < 20; i++) {
                    aDiv[i].style.left = 20 + (i - 10) * 60 + 'px';
                    aDiv[i].style.top = 60 + 'px';
                }

                //                for(var i=20;i<30;i++){
                //                    aDiv[i].style.left = 20+(i+10)*60+'px';
                //                    aDiv[i].style.top = 60+'px';
                //                }
                // 逢10 往下一行（小练习）
                // 来一个小V字形（小练习）

            };
        </script>
    </head>

    <body>
    </body>

</html>

逢十往下一行(代码一)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                width: 50px;
                height: 50px;
                background: red;
                position: absolute;
                top: 0;
                left: 0;
                font-size: 30px;
                text-align: center;
                line-height: 50px;
                color: #fff;
            }
        </style>
        <script>
            window.onload = function() {
                for(var i = 0; i < 11; i++) {
                    document.body.innerHTML += '<div>' + i + '</div>';
                }
                var aDiv = document.getElementsByTagName("div");
                for(var j = 0; j < 6; j++) {
                    aDiv[j].style.left = j * 50 + 'px';
                    aDiv[j].style.top = j * 50 + 'px';
                }
                for(var z = 6; z < 11; z++) {
                    aDiv[z].style.left = z * 50 + 'px';
                    aDiv[z].style.top = (10 - z) * 50 + 'px';
                }
            }

        </script>
    </head>
    <body>
    </body>
</html>

逢五往上(代码2)