JS-棋盘格

最新推荐文章于 2023-03-20 11:21:44 发布

BBBuild~

最新推荐文章于 2023-03-20 11:21:44 发布

阅读量150

点赞数

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/gogaogao/article/details/129661676

版权

前端专栏收录该内容

29 篇文章 1 订阅

订阅专栏

<script type="text/javascript">
   //生成一个id为box的元素   
   var oBox=document.createElement('div');
   oBox.id='box';
   document.body.appendChild(oBox);
   var index=0;
  
    for (var i = 0; i<400; i++) {
          //生成小div
          var oDiv=document.createElement('div');

        //index隔行取值
          if (index%2==1) {
           
            //i间隔取值
            if (i%2==0) {
               //每第20个i的颜色需要单独设置
                if (i%20==0) {
                     oDiv.style.background='red';
                }else{
                 oDiv.style.background='black';
                }
                
             }else{
                 oDiv.style.background='red';
             }
             
          }else{
          
            if (i%2==0) {
            
                if (i%20==0) {
                    oDiv.style.background='black';
                }else{
                 oDiv.style.background='red';
                }
                
             }else{
                 oDiv.style.background='black';
             }
             
          }


         //每20个i，index++，隔行取值
          if (i%20==0) {
            index++;
          }
          oBox.appendChild(oDiv);
   }