8

谁能给我一个关于如何使用 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>

我尝试将黑色和白色分别分配给每个奇数和偶数，但它不起作用。

先感谢您。

4

12 回答 12

18

我目前无法对其进行测试，但这应该可以。此代码创建一个 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);
于 2013-05-22T05:42:22.763 回答
16

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

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;
}
于 2013-05-22T06:12:20.423 回答
3

这是构建棋盘的基础。
您可以在控制台中查看棋盘图案。

   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)
于 2014-12-05T01:01:35.803 回答
2

你可以生成任何你想要的大小的板，这种方式很容易改变方块的大小和颜色。您无需更改任何其他内容。

保持样式表上的外观是一种很好的做法。也不要使用 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;
}
于 2013-09-09T01:27:50.617 回答
2

可能你想用 来做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>

于 2017-09-29T08:13:06.047 回答
0

你应该试试这个，这真的很管用

<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>
于 2020-04-28T19:57:47.377 回答
0

我的想法很简单，如果行是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);
于 2021-05-29T14:04:33.183 回答
0

以下代码将仅使用 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>
于 2016-05-03T11:10:34.073 回答
0

一点现代化，使用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;
        td.className = (i%2 === j%2) ? "white square" : "black square";
        tr.appendChild(td);
    }
    table.appendChild(tr);
}
document.querySelector("div").appendChild(table);
:root {
  --size:      640px;
  --backcolor: darkslategray;
  --dark:      grey;
  --light:     white;
  --legend:    azure;
  --hover:     lightgreen
}
.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);
}
td:hover {
  background: var(--hover);
  cursor: pointer
}
<div></div>

于 2021-08-08T22:42:07.383 回答
0

这是一个简单的 JS 复制粘贴解决方案。我知道它在调理方面并不是那么干净，但它可以理解地完成工作并且它非常简单。字段大小也很容易调整。

const fieldSize = 50;
const whiteField = document.createElement("div");
whiteField.style = `height:${fieldSize}px;width:${fieldSize}px;background-color:white;display:inline-block`;
const blackField = document.createElement("div");
blackField.style = `height:${fieldSize}px;width:${fieldSize}px;background-color:black;display:inline-block`;

for (let i = 0; i < 8; i++) {
  for (let j = 0; j < 8; j++)
    i % 2 === 0 ?
    j % 2 === 0 ?
    document.body.appendChild(blackField.cloneNode(true)) :
    document.body.appendChild(whiteField.cloneNode(true)) :
    j % 2 === 0 ?
    document.body.appendChild(whiteField.cloneNode(true)) :
    document.body.appendChild(blackField.cloneNode(true));

  document.body.appendChild(document.createElement("br"));
}

于 2021-10-11T08:01:11.423 回答
-1

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/

于 2013-05-22T05:46:55.703 回答
-4

你的意思是这样吗？

.... 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。如果条件为真，则第一个选项——否则为第二个。

于 2013-05-22T05:34:29.650 回答