发新贴  快速回复

js基础第二课练习for循环生成100个li问题?

  bokebi520
2015-04-14 10:08
先贴代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>自动生成100个Li</title>
    <style>
    body ,ul{margin: 0;}
    #list{ list-style: none; padding: 0; width: 650px; position: relative;}
    #list li{ width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 25px; border: 1px solid #333; position: absolute; left: 0; top: 10px;}
    .bgRed{ background: red;}
    .bgOrange{ background: orange;}
    .bgGreen{ background: green;}
    .bgBlue{ background: blue;}
    </style>
    <script type="text/javascript">
    window.err= = function(){
        var oBtn = document.getElementById('btn');
        var oUl = document.getElementById('list');
        var arrClass = ['bgRed','bgOrange','bgBlue','bgGreen'];
        var str = '';    

        oBtn.err= = function(){

            for(var i = 0; i<10; i++){
                var top = 10 + 60*i + 'px';
                for(var j = i*10; j<i*10+9; j++){
                    var left = 10 + 60*(j%10) + 'px';
                    str += '<li style = "left:'+ left +'; top:'+ top +';" class="'+ arrClass[j%arrClass.length] +'"> '+j+' </li>'
                }
            }

            oUl.innerHTML = str;
        };
    };
</script>
</head>
<body>
    <input type="button" value="自动生成100个Li" id="btn" />
    <ul id="list"></ul>
</body>
</html>在执行第二个for循环时,var left = 10 + 60*(j%10) + 'px';这里为什么要(j%10)? 整个循环流程是怎样的?请高手帮忙解答下,谢谢!
ghostdp
left值的变化是 10 70 130 190...

也就是 0*60 + 10  ,    1*60 + 10 ,     2*60 + 10  ,  3 *60 + 10 .....

那也就是 0  1  2  3 ... 的变化嘛

变化是有规律的012345678901234567890123456789....

所以  i%10正好可以得到上面的数

2015-04-14 13:54  回复本帖
老王爱js
我对部分代码做了备注,希望你能看的更清晰些!
 oBtn.err= = function(){

                        for(var i = 0; i<10; i++){
                                //每次循环 i 的值为 0,1,2,3,4,5,6,7,8,9
                                //总共循环10次,能循环出10排,计算出每一排的top值为:10,70,130,190,250,310,370,430,490,550,
                                var top = 10 + 60*i + 'px';

                              //每一排的top计算后,开始计算每一排10个div的left值
                             //每次循环j的初始值为:0,10,20,30,40,50,60,70,80,90
                           
                                for(var j = i*10; j<i*10+9; j++){
                                        //每循环一次都会记下来这一排的left值
                                        //j%10 ,始终是0,1,2,3,4,5,6,7,8,9
                                        //每一排div的left的值为:10px,70px,130px,190px,250px,310px,370px,430px,490px
                                        var left = 10 + 60*(j%10) + 'px';
                                        console.log(left);
                                        str += '<li style = "left:'+ left +'; top:'+ top +';" class="'+ arrClass[j%arrClass.length] +'"> '+j+' </li>'
                                }
                        }

                        oUl.innerHTML = str;
                };
2015-04-14 15:20  回复本帖
专注于前端
第一次做这个的时候用了两个for和一个if,过二十天又做的时候用了两三行,用一个/解决top,用%解决了left做完有点不敢相信
2015-04-14 15:42  回复本帖
 
bokebi520
forum.php?mod=redirect&goto=findpost&pid=38739&ptid=13095
left值的变化是 10 70 130 190...

也就是 0*60 + 10  ,    1*60 + 10 ,     2*60 + 10  ,  3 *60 + 10 ... ...

谢谢,已懂了!
2015-04-14 17:02  回复本帖
 
bokebi520
forum.php?mod=redirect&goto=findpost&pid=38743&ptid=13095
我对部分代码做了备注,希望你能看的更清晰些!

非常详细,已弄懂了,感谢回复!{:soso_e179:}
2015-04-14 17:04  回复本帖
老王爱js
forum.php?mod=redirect&goto=findpost&pid=38753&ptid=13095
非常详细,已弄懂了,感谢回复!

在给你扩展一种简单的形式,只需要一个for循环就搞定了,废话少说,上代码:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>生成100个div</title>
<style>
#list{list-style:none; position:relative;}
#list li{position:absolute;width:50px;height:50px;font:30px/48px "宋体"; text-align:center;border:solid 5px #FFF;}
</style>
<script>
var aColor=["red","green","blue","yellow"]
window.err==function()
{
       var oList=document.getElementById("list");
      var aInput=document.getElementsByTagName("input");
      var left = 0;
      var top = 0;
      var sHtml="";
     aInput[0].err==function()  {
         for(var i=0;i<100;i++){
              //求得每一行每一个div的left值
                left = (i%10)*60;
             //求得每一行的top值
                  top = Math.floor(i/10)*60;
              sHtml+='<li style="left:'+left+'px; top:'+ top +'px;'+'background:'+aColor[i%aColor.length] +'">'+i+'</li>';
    };
           oList.innerHTML=sHtml;
    }
}
</script>
</head>

<body>
<div id="box">
    <input type="button" value="自动生成100个li">
    <ul id="list"></ul>
</div>
</body>
</html>

2015-04-15 00:17  回复本帖
 
bokebi520
forum.php?mod=redirect&goto=findpost&pid=38772&ptid=13095
在给你扩展一种简单的形式,只需要一个for循环就搞定了,废话少说,上代码:




在求得每一行的top值,top = Math.floor(i/10)*60;这句代码用的太妙了,再次感谢老师的热心解答{:soso_e179:}
2015-04-15 15:49  回复本帖
月亮下的鱼

5555555555

2018-02-05 18:08  回复本帖
月亮下的鱼

1234567

2018-02-05 18:34  回复本帖
登录 后才可以发表回复