for应用（逢十、V字）

逢十往下一行

用js生成100个div，每行十个。

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; 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');

        for (var i = 0; i < 100; i++) {
            document.body.innerHTML += '<div>' + i + '</div>';
        }

        for (var i = 0; i < aDiv.length; i++) {
            var m = i % 10;
            var n = parseInt(i / 10);
            aDiv[i].style.left = m * 50 + 'px';
            aDiv[i].style.top = 10 + n * 50 + 'px';
        }


    };
    </script>
</head>

<body>
</body>

</html>

小拓展：可以用这种方法来写一个元素周期表的效果
小结：
求余数

1	document.write(1%4); //结果为1

求商

1	console.info(1/4);//结果为0.25

求商，取整

1	console.info(parseInt(1/4));//结果为0

天花板取整

1	console.info(Math.ceil(1/4));//结果为1

地板取整

1	console.info(Math.floor(1/4));//结果为0

V字形

js生成20个div,用js写一个v字形图案

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; 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');

        for (var i = 0; i < 20; i++) {
            document.body.innerHTML += '<div>' + i + '</div>';
        }

        for (var i = 0; i < aDiv.length / 2; i++) {
            aDiv[i].style.left = i * 50 + 'px';
            aDiv[i].style.top = i * 50 + 'px';
        }
        for (var i = aDiv.length / 2; i < aDiv.length; i++) {
            aDiv[i].style.left = i * 50 + 'px';
            aDiv[i].style.top = 50*aDiv.length - (i+1) * 50 + 'px';
        }

    };
    </script>
</head>

<body>
</body>

</html>