• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
别来无恙
博客园    首页    新随笔    联系   管理    订阅  订阅
for循环坐标生成《逢十往下一行》

<!DOCTYPE html>  

   <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

      div{   width: 50px;  

      height: 50px;   

     background-color: red;

      position: absolute;  

     top: 0;   left: 0;  

     line-height: 50px;

      text-align: center;  

     }

  </style>

  <script type="text/javascript">  

   window.onload=function (){

    // 1、先创建div   

     for(var i=0;i<20;i++){    

       document.body.innerHTML=document.body.innerHTML+'<div>'+i+'</div>';   

     }     

   // 2 、再查找div的位置   

     var aDiv = document.getElementsByTagName('div');

       for(var i=0;i<10;i++){     

         aDiv[i].style.left=20+i*50+'px';   

     }      

    // 3 、位置稍微做调整    

    // aDiv[10].style.top=50+'px';  

     // aDiv[10].style.left=20+'px';    //

     // aDiv[11].style.top=50+'px';  

    // aDiv[10].style.left=20+50*(11-10)+'px';   

     for(var i=10;i<30;i++){  

       aDiv[i].style.left=20+(i-10)*50+'px';   

      aDiv[i].style.top=50+'px';   

     }  

   }   

</script>

 </head>

 <body>  

 </body>

</html>

posted on 2017-05-25 11:35  别来无恙x  阅读(503)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3