码迷,mamicode.com
首页 > 其他好文 > 详细

2016-05-29 for循环几种应用

时间:2016-05-30 01:00:23      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:

1. 天梯 

效果图:

技术分享

    <style>
        div{width: 30px; height: 30px; border: 1px solid royalblue; background: red; position: absolute;top:0px; left: 0px;color: #fff}
    </style>
    <script>
        window.onload=function(){
            var str =‘‘;
            for(var i=0;i<11;i++){
                str+="<div>"+i+"</div>";
            }
            document.body.innerHTML=str;

            var divs=document.getElementsByTagName("div");
            len=divs.length;
            for(var i=0;i<len;i++){
                divs[i].style.left+=i*50+10+"px";//每个div左右间隔10px像素
                divs[i].style.top+=i*50+10+"px";//每个div上下间隔10px像素
            }
        }
    </script>
</head>
<body>
</body>
</html>

  

2.V字形  本质就是一个算法,当数字在一半+1的时候,数字增大值也增大, 超过一半的时候 数字增加值却变少6->130 7->100 8->70...

技术分享

    <script>
        window.onload=function(){
            var str =‘‘;
            for(var i=0;i<11;i++){
                str+="<div>"+i+"</div>";
            }
            document.body.innerHTML=str;

            var divs=document.getElementsByTagName("div");
            len=divs.length;
            var down=len%2==0?len/2:Math.ceil(len/2);
            var count=2;
            for(var i=0;i<len;i++){
                if(i<down){
                    divs[i].style.left+=i*30+10+"px";//每个div距离最左边有10px间距
                    divs[i].style.top+=i*30+10+"px";//每个div距离顶部有10px间距
                    alert( divs[i].style.top);
                }else if(i>=down &&i<len){
                    divs[i].style.left+=i*30+10+"px";
                    divs[i].style.top+=(i-count)*30+10+"px";//本质就是一个算法 数字增加值却变少6->130 7->100 8->70...
                    count+=2;
                }
            }
        }
    </script>

 3.嵌套for循环打印所有的元素

    <script>
        var arr=[
                [1,2,3,4,5],
                ["a","b","c","d","e","f"],
                [6,7,8,false,true],
        ];
        for(var i=0;i<arr.length;i++){
            for(var j=0;j<arr[i].length;j++){
                alert(arr[i][j])
            }
        }
    </script>

  

2016-05-29 for循环几种应用

标签:

原文地址:http://www.cnblogs.com/bravolove/p/5540881.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!