我有一个5x5的网格，并且我正在使用表格进行操作，我可以使用css编辑前5个但不能完成剩下的工作。
有没有我可以改变每个单元格的颜色。我需要一个空方形11个黑色方块和13个白色方块。
我一直试图使用这个，但这只适用于td：nth-child（1）
.box tbody tr:first-child td:nth-child(1) {
width: 60px;
height: 60px;
margin: 1px;
text-align: center;
background-color: black;
font-weight: bold;
font-size: x-large;
var id_empty;
var num_moves;
var isCompleted = false;
var time=0;
var nums = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25];
window.addEventListener("load", startTimer, false);
function startTimer()
{
window.setInterval("updateTime()", 1000);
}
function updateTime()
{
++time;
document.getElementById("time").innerHTML ="Current Time: " +time +" (seconds)";
}
function startPuzzle() {
num_moves = 0;
isCompleted = false;
for(var i=0; i < 25; i++) {
var tmp = document.getElementById(i);
tmp.className = "cell ";
}
randomNumber = nums.sort(function () { return (Math.round(Math.random())-0.5);});
while(!Problem.prototype.is_solvable(randomNumber)) {
randomNumber = nums.sort(function () { return (Math.round(Math.random())-0.5);});
}
for(var i=0; i < 25; i++) {
var tmp = document.getElementById(i);
if(randomNumber[i] == 25) {
tmp.className = "cell empty";
tmp.innerHTML = "";
id_empty = i;
}
else
tmp.innerHTML = randomNumber[i];
}
}
function clickCell(x)
{
if(isCompleted)
return;
if(x.id != id_empty+'') {
var emptyI = Math.floor(id_empty/5);
var emptyJ = id_empty % 5;
var id_selected = Number(x.id);
var selectedI = Math.floor(id_selected/5);
var selectedJ = id_selected % 5;
if((Math.abs(emptyI - selectedI) == 1 && emptyJ == selectedJ) ||
(Math.abs(emptyJ - selectedJ) == 1 && emptyI == selectedI)) {
document.getElementById(id_empty).className = "cell";
document.getElementById(id_empty).innerHTML = x.innerHTML;
x.className = "cell empty";
x.innerHTML = '';
id_empty = id_selected;
num_moves++;
document.getElementById("moves").innerHTML = "Moves so far: " + num_moves;
if(isDone()){
isCompleted = true;
document.getElementById("moves").innerHTML = "Letter complete - Shuffle tiles" + num_moves;
}
}
}
}
<!-- is done fuction can be used for letter recognition and is for future work -->
function isDone() {
return document.getElementById('0').innerHTML == '1' &&
document.getElementById('1').innerHTML == '2' &&
document.getElementById('2').innerHTML == '3' &&
document.getElementById('3').innerHTML == '4' &&
document.getElementById('4').innerHTML == '5' &&
document.getElementById('5').innerHTML == '6' &&
document.getElementById('6').innerHTML == '7' &&
document.getElementById('7').innerHTML == '8' &&
document.getElementById('8').innerHTML == '9' &&
document.getElementById('9').innerHTML == '10' &&
document.getElementById('10').innerHTML == '11' &&
document.getElementById('11').innerHTML == '12' &&
document.getElementById('12').innerHTML == '13' &&
document.getElementById('13').innerHTML == '14' &&
document.getElementById('14').innerHTML == '15' &&
document.getElementById('15').innerHTML == '16' &&
document.getElementById('16').innerHTML == '17' &&
document.getElementById('17').innerHTML == '18' &&
document.getElementById('18').innerHTML == '19' &&
document.getElementById('19').innerHTML == '20' &&
document.getElementById('20').innerHTML == '21' &&
document.getElementById('21').innerHTML == '22' &&
document.getElementById('22').innerHTML == '23' &&
document.getElementById('23').innerHTML == '24' &&
document.getElementById('24').innerHTML == '25' ;
}
function lastClick() {
var curr_state = currentState();
var problem = new Problem(curr_state);
var sol = Solver.a_star_search(problem);
var result = "<ol>";
for(var i = 0; i < sol.length; i++) {
var n = moveNumb(sol[i],curr_state);
curr_state = problem.result(sol[i],curr_state);
result += "<li>move " + n + "</li>";
}
result += "</ol>";
document.getElementById("steps").innerHTML = result;
}
function currentState() {
var result = [];
for(var i = 0; i < 25; i++) {
var tmp = document.getElementById(String(i)).innerHTML;
if(tmp == '') {
result[i] = 25;
}
else {
result[i] = Number(tmp);
}
}
return result;
}
function moveNumb(action,state) {
var i = state.indexOf(25);
switch(action) {
case Action.up:
return state[Util.index(Util.x(i),Util.y(i) - 1)];
case Action.down:
return state[Util.index(Util.x(i),Util.y(i) + 1)];
case Action.right:
return state[Util.index(Util.x(i) + 1,Util.y(i))];
case Action.left:
return state[Util.index(Util.x(i) - 1,Util.y(i))];
}
}
Array.prototype.clone = function() { return this.slice(0); };
Array.prototype.swap = function(i1,i2) {
var copy = this.clone();
var tmp = copy[i1];
copy[i1] = copy[i2];
copy[i2] = tmp;
return copy;
};
var Problem = function(start_state) {
this.init_state = start_state;
return this;
}
Problem.prototype.is_solvable = function(start) {
start = start.clone(); start.splice(start.indexOf(25), 1);
start[24] = 25;
var count = 0;
for(var i = 0; i < 24; i++) {
if(start[i] != i+1) {
count++;
var j = start.indexOf(i+1);
start[j] = start[i];
start[i] = i+1;
}
}
return count % 2 == 0;
}.box {
border-style: solid;
border-color: black;
border-width: 5px;
margin: 5px;
}
.cell {
width: 60px;
height: 60px;
margin: 1px;
text-align: center;
background-color: black;
font-weight: bold;
font-size: x-large;
padding: 0px;
}
.wCell {
width: 60px;
height: 60px;
margin: 1px;
text-align: center;
background-color: white;
text:white;
font: black;
font-weight: bold;
font-size: x-large;
padding: 0px;
}
.empty {
background-color: white;
}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<link href="style.css" rel="stylesheet" />
<script src="puzzle.js" type="text/javascript"></script>
</head>
<body onload="startPuzzle()">
<h2></h2>
<p id="moves"></p>
<p id="time"></p>
<p>
<button onclick="window.location.reload()">Shuffle Tiles</button>
</p>
<p>
</p>
<table class="box">
<tr>
<td id="0" class="wCell" onclick="clickCell(this)">1</td>
<td id="1" class="wCell" onclick="clickCell(this)">2</td>
<td id="2" class="wCell" onclick="clickCell(this)">3</td>
<td id="3" class="wCell" onclick="clickCell(this)">4</td>
<td id="4" class="wCell" onclick="clickCell(this)">5</td>
</tr>
<tr>
<td id="5" class="wCell" onclick="clickCell(this)">6</td>
<td id="6" class="wCell" onclick="clickCell(this)">7</td>
<td id="7" class="wCell" onclick="clickCell(this)">8</td>
<td id="8" class="wCell" onclick="clickCell(this)">9</td>
<td id="9" class="wCell" onclick="clickCell(this)">10</td>
</tr>
<tr>
<td id="10" class="wCell" onclick="clickCell(this)">11</td>
<td id="11" class="cell" onclick="clickCell(this)">12</td>
<td id="12" class="wcell" onclick="clickCell(this)">13</td>
<td id="13" class="wcell" onclick="clickCell(this)">14</td>
<td id="14" class="cell" onclick="clickCell(this)">15</td>
</tr>
<tr>
<td id="15" class="cell" onclick="clickCell(this)">16</td>
<td id="16" class="cell" onclick="clickCell(this)">17</td>
<td id="17" class="cell" onclick="clickCell(this)">18</td>
<td id="18" class="cell" onclick="clickCell(this)">19</td>
<td id="19" class="cell" onclick="clickCell(this)">20</td>
</tr>
<tr>
<td id="20" class="cell" onclick="clickCell(this)">21</td>
<td id="21" class="cell" onclick="clickCell(this)">22</td>
<td id="22" class="cell" onclick="clickCell(this)">23</td>
<td id="23" class="cell" onclick="clickCell(this)">24</td>
<td id="24" class="cell" onclick="clickCell(this)">25</td>
</tr>
</table>
</body>
</html>
答案 0 :(得分：0)
您好每个单元格都有不同的ID，您可以使用id为每个单元格着色。
＃12 {background：green;}
答案 1 :(得分：0)
在此代码段中：
<td>都会被收集到一个数组中<td>方法合并新洗牌的颜色数组和.map() s数组。<td>背景着色。<强>段
var x = 0,
y = 0,
temp = null;
// Collect every <td> into an array
const tiles = Array.from(document.querySelectorAll('td'));
const colors = ['b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'w', 'w', 'w', 'w', 'w', 'w', 'w', 'w', 'w', 'w', 'w', 'w', 'w', 't'];
// Fisher-Yates Shuffle
for (x = colors.length - 1; x > 0; x -= 1) {
y = Math.floor(Math.random() * (x + 1));
temp = colors[x];
colors[x] = colors[y];
colors[y] = temp;
}
console.log(colors);
// Map() both arrays into one
const mixArray = tiles.map(function(cell, idx) {
[cell, colors[idx]];
var cc = colors[idx];
// Determine tile color
switch (cc) {
case 'b':
cell.style.backgroundColor = 'black';
break;
case 'w':
cell.style.backgroundColor = 'white';
break;
case 't':
cell.style.backgroundColor = 'transparent';
break;
}
return cell;
});
console.log(mixArray);table { border:1px solid grey; table-layout:fixed;}
tbody {background:#555;}
td {border:1px solid red; width:50px;height:50px;}<table>
<tbody>
<tr class='A'>
<td class='A1'> </td>
<td class='A2'> </td>
<td class='A3'> </td>
<td class='A4'> </td>
<td class='A5'> </td>
</tr>
<tr class='B'>
<td class='B1'> </td>
<td class='B2'> </td>
<td class='B3'> </td>
<td class='B4'> </td>
<td class='B5'> </td>
</tr>
<tr class='C'>
<td class='C1'> </td>
<td class='C2'> </td>
<td class='C3'> </td>
<td class='C4'> </td>
<td class='C5'> </td>
</tr>
<tr class='D'>
<td class='D1'> </td>
<td class='D2'> </td>
<td class='D3'> </td>
<td class='D4'> </td>
<td class='D5'> </td>
</tr>
<tr class='E'>
<td class='E1'> </td>
<td class='E2'> </td>
<td class='E3'> </td>
<td class='E4'> </td>
<td class='E5'> </td>
</tr>
</tbody>
</table>