使用JavaScript实现的求解数独
静态网页，使用JavaScript求解数独，直接上代码：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"> <title>数独求解</title> <link rel="shortcut icon" href="#" /> <style type="text/css"> @media (min-width: 480px) { html { max-width: 480px; } } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0 auto; padding: 0; width: 100%; height: 100%; } /* 填满 */ .fill { width: 100%; height: 100%; } .row { display: flex; justify-content: space-around; height: 3rem; } /* 外边距 */ .mgn { margin-top: 2px; margin-bottom: 2px; margin-left: 2px; margin-right: 2px; } /* 内边距 */ .pdn { padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px; } /* 边框 */ .brd { border: 1px solid #ced4da; border-radius: 0.25rem; } input:nth-child(9n+1), input:nth-child(9n+4), input:nth-child(9n+7) { border-left: 2px solid black; } input:nth-child(9n), input:nth-child(9n+3), input:nth-child(9n+6) { border-right: 2px solid black; } div.row:nth-child(3n+1) > input { border-top: 2px solid black; } div.row:nth-child(3n) > input { border-bottom: 2px solid black; } /* 居中 */ .a-midle { display: flex; justify-content: center; align-items: center; text-align: center; } .bold { color: darkblue; font-weight: bold; font-size: 1.2rem; } </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> function CheckCount(count) { for (var i = 0; i < 9; i++) { if (count[i] > 1) { return false; } } return true; } function CheckBoard(board) { // 验证九行 for (var i = 0; i < 9; i++) { var count = [0, 0, 0, 0, 0, 0, 0, 0, 0]; for (var j = 0; j < 9; j++) { var n = board[i * 9 + j]; if (n > 0) { count[n - 1]++; } } if (!CheckCount(count)) { return false; } } // 验证九列 for (var i = 0; i < 9; i++) { var count = [0, 0, 0, 0, 0, 0, 0, 0, 0]; for (var j = 0; j < 9; j++) { var n = board[j * 9 + i]; if (n > 0) { count[n - 1]++; } } if (!CheckCount(count)) { return false; } } // 验证九格 for (var i = 0; i < 9; i++) { var count = [0, 0, 0, 0, 0, 0, 0, 0, 0]; for (var j = 0; j < 9; j++) { var idx = (Math.floor(i / 3) * 3 + Math.floor(j / 3)) * 9 + i % 3 * 3 + j % 3; var n = board[idx]; if (n > 0) { count[n - 1]++; } } if (!CheckCount(count)) { return false; } } return true; } $ (function () { $("#btn_calc").click(function () { var $inputs = $("input"); var tryNum = 0; var tryList = []; var board = []; var $board = []; for (var i = 0; i < 9; i++) { for (var j = 0; j < 9; j++) { var idx = i * 9 + j; $board[idx] = $($inputs[idx]); board[idx] = Number($board[idx].val()); if (isNaN(board[idx])) { board[idx] = 0; } if (board[idx] == 0) { tryList[tryNum++] = idx; $($inputs[idx]).removeClass("bold"); } else { $($inputs[idx]).addClass("bold"); } } } if (!CheckBoard(board)) { alert("输入不正确"); return; } console.log("开始计算:"); var tryIdx = 0; var timerId = setInterval(function () { for (var i = 0; i < 16; i++) { var brdIdx = tryList[tryIdx]; board[brdIdx]++; if (board[brdIdx] > 9) { // 回退 board[brdIdx] = 0; $board[brdIdx].val(""); tryIdx--; if (tryIdx < 0) { clearInterval(timerId); break; } } else { $board[brdIdx].val(board[brdIdx]); if (CheckBoard(board)) { // 检查通过，进入下一个空格 tryIdx++; if (tryIdx == tryNum) { clearInterval(timerId); break; } } } } }, 0); }); $("#btn_clear").click(function () { var $inputs = $("input"); for (var i = 0; i < 81; i++) { $($inputs[i]).val(""); $($inputs[i]).addClass("bold"); } }); }); </script> </head> <body> <div class="row pdn"> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" value="4" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> </div> <div class="row pdn"> <input class="fill mgn brd a-midle" value="9" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" value="8" /> <input class="fill mgn brd a-midle" value="5" /> <input class="fill mgn brd a-midle" value="3" /> <input class="fill mgn brd a-midle" /> </div> <div class="row pdn"> <input class="fill mgn brd a-midle" value="1" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" value="2" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" value="6" /> <input class="fill mgn brd a-midle" /> </div> <div class="row pdn"> <input class="fill mgn brd a-midle" value="4" /> <input class="fill mgn brd a-midle" value="9" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" value="8" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" value="5" /> <input class="fill mgn brd a-midle" value="6" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> </div> <div class="row pdn"> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> </div> <div class="row pdn"> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" value="3" /> <input class="fill mgn brd a-midle" value="2" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" value="1" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" value="7" /> <input class="fill mgn brd a-midle" value="5" /> </div> <div class="row pdn"> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" value="5" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" value="3" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" value="2" /> </div> <div class="row pdn"> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" value="8" /> <input class="fill mgn brd a-midle" value="7" /> <input class="fill mgn brd a-midle" value="6" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" value="9" /> </div> <div class="row pdn"> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" value="1" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> <input class="fill mgn brd a-midle" /> </div> <div class="row pdn"> <button id="btn_calc" class="fill mgn">计算</button> </div> <div class="row pdn"> <button id="btn_clear" class="fill mgn">清除</button> </div> </body> </html>
