Fatal编程技术网

简单JavaScript棋盘

javascript html css

简单JavaScript棋盘,javascript,html,css,Javascript,Html,Css,有谁能给我一个关于如何使用JavaScript、使用表标记或标签生成棋盘（8x8）的提示吗 到目前为止，我得到了以下信息： <DOCTYPE html> <html> <head> <style> div { border:1px solid black; width:20px; height:20px; } </style> </head> <body> <script type="text/java

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


div
{
边框：1px纯黑；
宽度：20px；
高度：20px；
}
//创建一个棋盘8x8。
var计数=0；
而（计数<64）
{
如果（计数%2==0）
{
如果（计数%8==0&&count！=0）
{
文档。编写（“
”）；
}
其他的
{
文档。编写（'nbsp'）；
}
}
其他的
{
文档。编写（'nbsp'）；
}
/*  
*/          
计数++；
}
我试着给每个奇数和偶数分别分配黑色和白色，但这样不行

提前谢谢你。

你是说这样吗

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

我现在无法测试它，但这应该可以工作。此代码创建一个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);

var table=document.createElement（“表”）；
对于（变量i=1；i<9；i++）{
var tr=document.createElement（'tr'）；
对于（var j=1；j<9；j++）{
var td=document.createElement（'td'）；
如果（i%2==j%2）{
td.className=“白色”；
}否则{
td.className=“黑色”；
}
tr.appendChild（td）；
}
表1.儿童（tr）；
}
document.body.appendChild（表）；
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);
    }
}

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);
示例：

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

JS:

您可以生成任意大小的电路板，这种方法很容易更改正方形的大小和颜色。你不需要改变其他任何事情

在样式表上保持外观是一种很好的做法。 也

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"));
    }
}
这是建立棋盘的基本基础。 您可以在控制台中查看棋盘图案

   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)

var chessBoard=函数（大小）{
var hash='#'
变量空间=''''
对于（变量i=0；i
以下代码将仅使用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>


文件。填写（“”）；

对于（var i=1；i可能是，您希望使用divs
divs
，而不是使用表



$（文档）.ready（函数（）{

对于（var i=1；i你应该试试这个，它真的很管用


<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>




.棋盘{
显示：内联块；
边框：2倍纯色浅灰色；
}
.棋盘组{
线高：1px；
}
.棋盘跨度{
显示：内联块；
宽度：32px；
高度：32px；
背景颜色：雪；
}
函数colorNormal（x，y，color）{
var chessBoard=document.getElementById（“chessBoardNormal”）；
对于（变量i=0；i.5？'black'：'#CFD65C'）；
}
函数getRandomHexColor（）{
返回“#”+Math.floor（Math.random（）*16777215）.toString（16）；
}
颜色正常（8，8，'黑色'）；

我的想法很简单，如果行是
偶数
则从白色开始，否则从黑色开始

HTML:





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);
    }
}



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);



const fragment=document.createDocumentFragment（）；
const board=document.getElementById（“主棋盘”）；
常数大小=8；
for（设i=0；i
出于兴趣，你为什么要用javascript而不是手动编写html？你有没有机会使用opengl？如果有，请使用opengl轻松查看一下，这样你可能会想看看html5canvas@GlenMorse这是JavaScript，不是JavaHi，谢谢你的建议。我还在学习，我的作业还在继续我的原始帖子应该是“…table tags或div”。谢谢你的建议！谢谢！这个答案在我看来是最合适的（考虑到我的新手水平）.document.write不是最好的方法document.write从答案中删除！…当你在td标签上添加一个20px的填充时，你会看到它的美丽。谢谢JiménezThank！我花了五秒钟才弄明白：）考虑到这是一个代码块，你可能想替换lt和gt

<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>



<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>



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



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);