gpt4 book ai didi

javascript - 在棋盘上添加数字和字母

转载 作者:行者123 更新时间:2023-11-28 17:03:16 26 4
gpt4 key购买 nike

我有一个用 JavaScript 创建的简单棋盘,我想在棋盘的两侧添加字母和数字,这样它看起来就像真正的棋盘。我尝试使用 for 循环添加带有字母和数字的元素,但条件似乎是错误的,因为它不起作用。这是我的 HTML 代码:

        let table = document.createElement("table");
for (let i = 8; i > 0; i--) {
let tr = document.createElement('tr');
let number = document.createElement('td');
number.className = 'number';
number.innerHTML = i;
tr.appendChild(number);
for (let j = 0; j < 8; j++) {
let 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);
* {
margin: 0;
padding: 0;
}
table {
border-spacing: 0;
margin: 20px 20px;
}
.black {
width: 38px;
height: 38px;
background: black;
border: 1px solid transparent;
}
.white {
width: 38px;
height: 38px;
background: white;
border: 1px solid black;
}
.number {
padding-right: 10px;
font-size: 18px;
font-weight: bold;
}

最佳答案

这就是我要做的(仍然需要对样式进行一些调整):

let table = document.createElement("table");
let letters = "ABCDEFGH";
for (let i = 0; i < 9; i++) {
let tr = document.createElement('tr');
for (let j = 0; j < 9; j++) {
let td = document.createElement('td');
if (j === 0) {
td.textContent = 8-i || '';
tr.appendChild(td);
continue;
}
if (i === 8) {
td.textContent = letters.charAt(j-1);
td.classList.add('letter');
tr.appendChild(td);
continue;
}
if (i % 2 == j % 2) {
td.className = "white";
} else {
td.className = "black";
}
tr.appendChild(td);
}
table.appendChild(tr);
}
document.body.appendChild(table);
* {
margin: 0;
padding: 0;
}

table {
border-spacing: 0;
border: 0;
margin: 20px 20px;
}

tr:not(:last-child) td:not(:first-child) {
border: 1px solid black;
}

.black {
width: 40px;
height: 40px;
background: black;
}

.white {
width: 40px;
height: 40px;
background: white;
}

.letter {
text-align: center;
}

关于javascript - 在棋盘上添加数字和字母,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56733349/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com