Question

有人能给我一个如何使用JavaScript生成国际象棋棋盘（8x8），使用表格标签或提示吗？

到目前为止我有以下内容：

<DOCTYPE html>
<html>
<head>
<style>

div
{
border:1px solid black;
width:20px;
height:20px;
}

</style>
</head>
<body>
<script type="text/javascript">

    // create a chess table 8x8.

    var count = 0;

while (count < 64)
    {

    if (count % 2 == 0)

        {

        if (count % 8 == 0 && count !=0)
            {
            document.write('<br/><div style="background-color:#000000;float:left;">&nbsp</div>');

            }
        else    
            {
            document.write('<div style="background-color:#000000;float:left;">&nbsp</div>');    
            }
        }

    else

        {
        document.write('<div style="background-color:#FFFFFF;float:left;">&nbsp</div>');
        }
    /*  
    */          
    count++;
    }
</script>

</body>
</html>

我试图分别为每个奇数和偶数分配黑白，但它不能这样工作。

提前谢谢。

Answer 1

我现在无法测试它，但这应该有效。此代码创建一个8x8表，其中黑色单元格标记为“黑色”类，白色单元格标记为“白色”类。使用CSS为它们赋予颜色。我希望它有所帮助。

var table = document.createElement("table");
for (var i = 1; i < 9; i++) {
    var tr = document.createElement('tr');
    for (var j = 1; j < 9; j++) {
        var td = document.createElement('td');
        if (i%2 == j%2) {
            td.className = "white";
        } else {
            td.className = "black";
        }
        tr.appendChild(td);
    }
    table.appendChild(tr);
}
document.body.appendChild(table);

Answer 2

在某些时候，对我来说，这成了代码高尔夫：

http://jsfiddle.net/4Ap4M/

JS：

for (var i=0; i< 64; i++){
    document.getElementById("mainChessBoard").appendChild(document.createElement("div")).style.backgroundColor = parseInt((i / 8) + i) % 2 == 0 ? '#ababab' : 'white';    
}

HTML：

<div id="mainChessBoard">
</div>

CSS：

#mainChessBoard
{
    width:160px;
    height:160px;
    border:1px solid black;
}

div
{
 width:20px;
 height:20px;
 float:left;
}

Answer 3

您可以生成任何尺寸的板，这种方式很容易改变正方形和颜色的大小。你不需要改变其他任何东西。

最好在样式表上保留外观。另外don't use document.write

http://jsfiddle.net/YEJ9A/1/

<强>的Javascript

var x=8;
var y=8;

var chessBoard = document.getElementById("chessBoard");

for (var i=0; i<y; i++){
    var row = chessBoard.appendChild(document.createElement("div"));
    for (var j=0; j<x; j++){
        row.appendChild(document.createElement("span"));
    }
}

<强> CSS

#chessBoard span{
    display: inline-block;
    width: 32px;
    height: 32px;
}

#chessBoard div:nth-child(odd) span:nth-child(even),
#chessBoard div:nth-child(even) span:nth-child(odd){
    background-color: black;
}
#chessBoard div:nth-child(even) span:nth-child(even),
#chessBoard div:nth-child(odd) span:nth-child(odd){
    background-color: silver;
}

Answer 4

这是建立国际象棋棋盘的基础您可以在控制台中查看国际象棋棋局模式。

   var chessBoard = function(size){
    var hash = '#'
    var space = '_'
    for (var i = 0; i < size; i++) 
    {        

        hash += '\n'

        for (var j = 0; j < size; j++) 
        {
        if((i +j) % 2 == 0)
        {
        hash  += space
        }
        else
        {
        hash  += "#"
        }
    };

};

console.log(hash)
}(8)

Answer 5

您可能希望使用divs，而不是使用表格。所以这是解决方案。

$(document).ready(function() {
  for (var i = 1; i <= 8; i++) {
    var divRow = $("<div>", {
      class: "row",
    });
    for (var j = 1; j <= 8; j++) {
      var div = $("<div>", {
        class: "square"
      });

      if (i % 2 == j % 2) {
        $(div).addClass("white");
      } else {
        $(div).addClass("black");
      }
      divRow.append(div);
    }
    $("#board").append(divRow);
  }
});

#board {
  margin: 0;
  width: 256px;
  height: 256px;
  border: solid 1px #333;
}

#board .row {
  margin: 0;
}

.square {
  height: 32px;
  width: 32px;
  background: #efefef;
  float: left;
}

.square.white {
  background: #fff;
}

.square.black {
  background: #333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="board"></div>

Answer 6

以下代码将仅使用HTML和JavaScript打印棋盘。

<script>
    document.write("<table border='1' width='200' height='200'>");
    for(var i=1; i<=8; i++)
    {
    document.write("<tr>");
    for(var j=1; j<=8; j++)
    {
    if((i+j)%2!=0)
    {
    document.write("<td bgcolor='white'></td>");
    }
    else
    {
    document.write("<td bgcolor='black'></td>");
    }
    }
    document.write("</tr>");
    }
    document.write("</table>");
    </script>

Answer 7

您应该尝试这一操作，

<DOCTYPE html>
<html>

<head>
    <style>
        .chessBoard {
            display: inline-block;
            border: 2px solid lightGray;
        }

        .chessBoard div {
            line-height: 1px;
        }

        .chessBoard span {
            display: inline-block;
            width: 32px;
            height: 32px;
            background-color: snow;
        }
    </style>
</head>

<body>
    <div class="chessBoard" id="chessBoardNormal"></div>
    <div class="chessBoard" id="chessBoardRandom"></div>
    <script>
        function colorNormal(x, y, color) {
            var chessBoard = document.getElementById("chessBoardNormal");
            for (var i = 0; i < x; i++) {
                var row = chessBoard.appendChild(document.createElement("div"));
                for (var j = 0; j < y; j++) {
                    var span = document.createElement('span');
                    if (i & 1) { // odd
                        if (j & 1) { // white

                        } else { // black
                            span.style.backgroundColor = color;
                        }
                    } else { // even
                        if (j & 1) { // black
                            span.style.backgroundColor = color;
                        }
                    }

                    row.appendChild(span);
                }
            }
        }

        function colorRandom(x, y) {
            colorNormal(8, 8, Math.random() > .5 ? 'black' : '#CFD65C');
        }

        function getRandomHexColor() {
            return '#' + Math.floor(Math.random() * 16777215).toString(16);
        }

        colorNormal(8, 8, 'black');
    </script>
</body>

</html>

Answer 8

我的想法很简单，如果行是even，那么从白块开始，否则从黑块开始。

HTML：

<div id="mainChessBoard"></div>

Javascript：

const fragment = document.createDocumentFragment();
const board = document.getElementById("mainChessBoard");
const size = 8;

for (let i = 0; i < size; i++) {
  let start = i % 2 === 0 ? 0 : 1; // if row is even then start with white otherwise start with black;
  for (let j = 0; j < size; j++) {
    const div = document.createElement('div');
    div.classList.add(start === 1 ? "black" : "white");
    fragment.appendChild(div);
    start = start === 1 ? 0 : 1;
  }
}

board.appendChild(fragment);

Answer 9

一点点现代化，使用 css variables、css attr() 和 dataset attributes。

这允许调整主题，并保持简单。

const cols = {0:"A", 1:"B", 2:"C", 3:"D", 4:"E", 5:"F", 6:"G", 7:"H"}
const table = document.createElement("table");
table.className = "board";
for (let i = 1; i < 9; i++) {
    let tr = document.createElement('tr');
    tr.dataset.line = i
    for (let j = 1; j < 9; j++) {
        let td = document.createElement('td');
        td.dataset.col = cols[j-1]
        td.dataset.line = i
        if (i%2 == j%2) {
            td.className = "white square";
        } else {
            td.className = "black square";
        }
        tr.appendChild(td);
    }
    table.appendChild(tr);
}
document.querySelector("div").appendChild(table);

:root {
  --size:      640px;
  --backcolor: darkslategray;
  --dark:      grey;
  --light:     white;
  --legend:    azure;
}

.board {
  width: var(--size);
  height: var(--size);
  border: 32px solid;
  border-color: var(--backcolor);
  border-radius: 0.2rem;
}

.square {
  border: 1px black solid;
}
.white{
  background: var(--light);

}
.black{
  background: var(--dark)
}

.board tr::before {
  content: attr(data-line);
  position: absolute;
  margin: 1.8rem 0 0rem -1.5rem;
  font-size: larger;
  color: var(--legend);
}

.board tr::after {
  content: attr(data-line);
  position: absolute;
  margin: 1.8rem 0 0rem 0.8rem;
  font-size: larger;
  color: var(--legend);
}

.board tr:first-child > td::before {
  content: attr(data-col);
  position: absolute;
  margin: -4rem 0 0rem 1.6rem;
  font-size: larger;
  color: var(--legend);
}

.board tr:last-child > td::after {
  content: attr(data-col);
  position: absolute;
  margin: 2.6rem 0 0rem 1.6rem;
  font-size: larger;
  color: var(--legend);
}

<div></div>

Answer 10

使用Javascript：

var i, j, clas;
for (i = 0; i < 8; i++) {
    for (j = 0; j < 8; j++) {
        clas = '';

        if (j === 0) clas = 'first ';
        else if (j === 7) clas = 'last ';
        clas += (i % 2 == j % 2) ? 'white' : 'black';

        var field = document.createElement('div');
        field.className = clas;
        document.body.appendChild(field);
    }
}

CSS：

div {
    float: left;
    width: 20px;
    height: 20px;
}
.first {
    clear: left;
}
.black {
    background: black;
}
.white {
    background: red;
}

示例：http://jsfiddle.net/YJnXG/2/

Answer 11

你的意思是这样吗？

.... html.....
&lt;table&gt;
&lt;tr&gt;
&lt;script language='javascript'&gt;
&lt;!--
alternate();
//--&gt;
&lt;/script&gt;
&lt;/tr&gt;
&lt;/table&gt;
....more html.....

function alternate()
{
var numOfCells = 6;
var num = 0;
for (i = 0; i &lt; numOfCells ; i++)
{
txt = "&lt;td bgColor='";
txt += (num % 2 == 0) ? 'red' : 'black';
txt += "'&gt;"
document.write(txt);
num++;
}
}

％符号为mod;它返回除法的余数。 “（......）？......：......;”建筑就像一个if / else。如果条件为真，则第一个选项 - 否则为第二个选项。

简单的JavaScript棋盘

11 个答案: