<html dir="ltr" lang="zh" class="focus-outline-visible" style="background-color: rgb(255, 255, 255);background-image: unset;t: rgba(0, 0, 0, 1);"><head>
<meta charset="utf-8">
<title>数独</title>
<!-- <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> -->
<style>
table{
background:#FF0000;
margin:20px auto;
}
.footer{
margin:20px auto;
text-align:center;
}
td{
width:50px;
height:50px;
font-size:30px;
color:BLACK;
font-weight:bolder;
}
td.fixed{
color:BROWN;
}
td.hover{
background:#CCFFEE!important;
}
td.tip{
background:#7895f7!important;
}
td.active{
opacity: 1;
font-size:40px;
background:BROWN!important;
color:#FFFFFF!important;
}
input{
line-height:30px;
}
.btn{
background: #F3FD9D;
border: none;
line-height: 34px;
border-radius: 4px;
width:100px;
}
</style></head>
<body>
<table contenteditable="true" border="1" style="
width: 500px;
height: 500px;
text-align: center;
line-height: 50px;
">
<tbody><tr>
<td></td>
<td></td>
<td class="fixed" contenteditable="false">5</td>
<td></td>
<td></td>
<td class="fixed" contenteditable="false">7</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="fixed" contenteditable="false">9</td>
<td class="fixed" contenteditable="false">3</td>
<td></td>
<td></td>
<td class="fixed" contenteditable="false">7</td>
</tr>
<tr>
<td class="fixed" contenteditable="false">6</td>
<td></td>
<td class="fixed" contenteditable="false">1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="fixed" contenteditable="false">9</td>
</tr>
<tr>
<td></td>
<td class="fixed" contenteditable="false">1</td>
<td class="fixed" contenteditable="false">2</td>
<td></td>
<td></td>
<td class="fixed" contenteditable="false">4</td>
<td></td>
<td class="fixed" contenteditable="false">9</td>
<td></td>
</tr>
<tr>
<td></td>
<td class="fixed" contenteditable="false">5</td>
<td></td>
<td class="fixed" contenteditable="false">9</td>
<td></td>
<td class="fixed" contenteditable="false">1</td>
<td></td>
<td class="fixed" contenteditable="false">8</td>
<td></td>
</tr>
<tr>
<td></td>
<td class="fixed" contenteditable="false">9</td>
<td></td>
<td class="fixed" contenteditable="false">6</td>
<td></td>
<td></td>
<td class="fixed" contenteditable="false">2</td>
<td class="fixed" contenteditable="false">5</td>
<td></td>
</tr>
<tr>
<td class="fixed" contenteditable="false">5</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="fixed" contenteditable="false">1</td>
<td></td>
<td class="fixed" contenteditable="false">2</td>
</tr>
<tr>
<td class="fixed" contenteditable="false">1</td>
<td></td>
<td></td>
<td class="fixed" contenteditable="false">4</td>
<td class="fixed" contenteditable="false">5</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td class="fixed" contenteditable="false">7</td>
<td></td>
<td></td>
<td class="fixed" contenteditable="false">9</td>
<td></td>
<td></td>
</tr>
</tbody></table>
<div class="footer">
<input type="text" id="number" />
<button class="btn" onclick="tip()">提示</button>
</div>
<script>
let tds = document.querySelectorAll("td");
tds.forEach((td, idx) => {
let row = Math.floor(idx / 9);
let col = idx % 9;
let bRow = Math.floor(idx / 9 / 3);
let bCol = Math.floor(idx % 9 / 3);
let group = bRow * 3 + bCol;
let colors = ["#FFFFFF", "#EEEECC","#FFFFFF", "#EEEECC","#FFFFFF", "#EEEECC","#FFFFFF","#EEEECC", "#FFFFFF"];
td.style.background = colors[group];
td.x = col;
td.y = row;
td.g = group;
td.onclick = function(){
tds.forEach(item => {
let className = item.className || "";
className = className.replace(/\s?tip/g, "").replace(/\s?active/g, "").replace(/\s?hover/g, "");
if(item.x == this.x || item.y == this.y){
className = className + " hover";
}
item.className = className;
})
if(this.innerText){
document.getElementById("number").value = this.innerText;
}
}
/*td.onmouseleave = function(){
tds.forEach(item => {
let className = item.className || "";
className = className.replace(/\s?tip/g, "").replace(/\s?active/g, "").replace(/\s?hover/g, "");
item.className = className;
})
}*/
})
function tip(){
let number = document.getElementById("number").value;
if(!number){
return false;
}
let xs = [];
let ys = [];
let gs = [];
tds.forEach((td, idx) => {
let className = td.className || "";
className = className.replace(/\s?tip/g, "").replace(/\s?active/g, "").replace(/\s?hover/g, "");
td.className = className;
});
tds.forEach((td, idx) => {
let val = td.innerText.trim();
if(val == number){
xs.push(td.x);
ys.push(td.y);
gs.push(td.g);
let className = td.className || "";
className = className + " active";
td.className = className;
}
});
tds.forEach(item => {
let className = item.className || "";
if(!xs.includes(item.x) && !ys.includes(item.y) && !gs.includes(item.g) && !item.innerText){
className = className + " tip";
item.className = className;
}
})
}
</script>
</body></html>
