多种方法用javascript输出黑白棋

最新推荐文章于 2024-06-07 19:55:36 发布

原创最新推荐文章于 2024-06-07 19:55:36 发布 · 1.3k 阅读

CC 4.0 BY-SA版权

本文介绍了使用JavaScript实现黑白棋的三种方法，包括利用for循环、display属性和float布局。在实现过程中，注意到了display属性可能导致的缝隙问题，通过设置font-size为0来解决，同时提到了使用float布局对body宽度的限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学到for循环必定少不了多刷题~

方法一、方法二样式：这里用了display，会产生一条缝隙，是根据根字体大小确定的，因此设置font-size:0;

 *{
            margin:0;
            padding:0;
            font-size: 0;
        }
        .black{
            width:30px;
            height:30px;
            background: black;
            display: inline-block;
            border:1px solid black;
        }
        .white{
            width:30px;
            height:30px;
            background: white;
            display: inline-block;
            border:1px solid black;
        }

方法一：

 /*    j
         i  0行0列 0行1列 0行2列 0行3列 0行4列....
            1行0列 1行1列 1行2列 1行3列 1行4列
            2行0列 2行1列 2行2列 2行3列 2行4列
            3行0列 3行1列 3行2列 3行3列 3行4列
            .
            .
            .
        */ 
        for(var i=0;i<8;i++){
            for(var j=0;j<8;j++){
                //
                if((i%2==1 && j%2==1) || (i%2==0 && j%2==0)){
                    document.write('<div class="black"> </div>');
                }else{
                    document.write('<div class="white"> </div>');
                }
            }
            document.write("<br/>");
        }

方法二：

 for(var i=0;i<8;i++){
            for(var j=0;j<8;j++){
                if( (j+i)%2 == 0 ){
                    //0行+0列=0 偶数  黑
                    document.write('<div class="black"> </div>');
                }else{
                    //0行 + 1列 =1 奇数 白
                    //1行 + 0列 =1 奇数 白                    
                    document.write('<div class="white"> </div>');
                }
            }
            document.write("<br/>");
        }

方法三：（这个方法没有很灵活）

样式：这里给每个divfloat，所以限制了body宽度

 body{
            width:240px;
        }
        .black{
            width:30px;
            height:30px;
            background: black;
            float:left;
        }
        .white{
            width:30px;
            height:30px;
            background: white;
            float:left;
        }

  for(var j=0;j<8;j++){
            if(j%2 !== 0){
                //偶数行
                for(var i=0;i<8;i++){
                    if(i%2 == 0){
                        document.write('<div class="black"> </div>');
                    }else{
                        document.write('<div class="white"> </div>');
                    }
                }
            }else{
                //奇数行
                for(var i=0;i<8;i++){
                    if(i%2 == 0){
                        document.write('<div class="white"> </div>');
                    }else{
                        document.write('<div class="black"> </div>');
                    }
                }
            }
            document.write("<br/>");
        }