使用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- 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>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/zhuyingchun/p/13598477.html