几种黑白相间的棋盘实现方法

最新推荐文章于 2021-10-31 16:08:47 发布

猛一回头

最新推荐文章于 2021-10-31 16:08:47 发布

阅读量8.8k

点赞数 3

分类专栏： js

本文链接：https://blog.csdn.net/xie_lu/article/details/79512651

版权

js 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

方法一：用 DIV 实现

<style>
    .black-cell{
        width:50px;
        height:50px;
        background: #000;
        position: absolute;
        top:0;
        left:0;
    }
</style>

    <div id="qipan" style="width:400px;height:400px;border:1px solid #aaa;background:#fff; position: relative;"></div>

<script>    
    var frag = document.createDocumentFragment();    
    for (var line = 0; line < 8; line++) {
        for (var column = 0; column < 8; column++) {
            if ( (column+line) % 2 != 0) {
                var div =  document.createElement("div");
                div.setAttribute("class", "black-cell");
                div.style.top = (line*50) + "px";
                div.style.left = (column*50) + "px";
                frag.appendChild(div);
            } 
        }
    }
    document.getElementById("qipan").appendChild(frag);
</script>

方法二：利用原生表格实现

<table id="t1" cellspacing="0" cellpadding="0" border=1></table>

<script>
    var t1 = document.getElementById("t1");
    var str = ""
    for (var i =0; i<8; i++) {
        str += "<tr>";
        for(var j = 0; j<8; j++){
            if((i+j)%2 !== 0){
                str += "<td style='width:50px;height:50px;background:#000;'></td>";
            }else{
                str += "<td style='width:50px;height:50px;'></td>";
            }               
        }
        str += "</tr>";
    }
    t1.innerHTML = str;
</script>

方法三：利用 ES6 实现

<style>
    .row>span{
        display: inline-block;
        text-align: center;
        width:50px;
        height:50px;
    }
    .black{
        background: #000;
    }

    div .row{
        height:50px;
    }
</style>
<body>
    <div id="board" ></div>

    <script>                
        function row(value=''){
            const array = new Array(8);
            array.fill(value);
            return array;
        }

        function allcells(value=''){
            return Array.from({length:8},() =>row(value)); 
        }

        const table = allcells();
        const cells = table.map((rows, i)=>rows.map((cell, j)=>{
            if ((i+j) % 2 != 0){
                return $("<span>").addClass("black").text(cell);
            } else{
                return $("<span>").text(cell);
            }                   
        }));
        const rowsTodiv = cells.map(spans=>{
            return $("<div>").addClass("row")
                            .append(spans)});
        $("#board").append(rowsTodiv);
    </script>
</body>

最后截一张实现完成的图片：
这里写图片描述