jQuery版数独求解算法，欢迎牛人拍砖。

最新推荐文章于 2025-09-12 17:31:31 发布

原创最新推荐文章于 2025-09-12 17:31:31 发布 · 450 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#算法 #jquery #class #button #function #div

javascript & jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种基于HTML和JavaScript的数独游戏解决方案，通过自定义MAP对象来管理游戏状态，并利用递归算法求解数独谜题。文章详细解释了数独游戏的布局结构、用户交互方式以及求解过程。

大家可以将代码复制拷贝到本地HTML页面上直接运行查看效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Sudoku</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">#main { margin-left: 20px; float: left; } #main #info span { display:-moz-inline-box; display:inline-block; width:50px; text-align: right; } #main .area { float: left; border: 1px solid black; } #main .area div { width: 60px; height: 60px; border: 1px solid blue; float: left; } #main .area #template { width: 60px; height: 60px; border: 0; font-size: 12px; } #main .area #template div { width: 20px; height: 17px; border: 0; color: white; text-align: center; padding-top: 3px; } #main .area div .val { padding: 5px; width: 50px; height: 50px; font-size: 45px; border: 0; text-align: center; } #main .area div .y { background-color: gray; } br { clear: both; } #button { float: left; } #button button { width: 100px; padding: 3px 0; display: block; margin-bottom: 12px; } #button label { display: block; margin-bottom: 5px; }</style> <mce:script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></mce:script> <mce:script type="text/javascript"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <div id="button"> <button>NEW GAME</button> <button>EDIT DONE</button> <button>ROTATE</button> <button>REPLAY</button> <label for="timer">DELAY: <select id="timer" name="timer"> <option value="0">0</option> <option value="50">50</option> <option value="500">500</option> <option value="1000">1000</option> <option value="1500">1500</option> <option value="2000">2000</option> </select> ms </label> <label for="order">PICK ORDER: <select id="order" name="order"> <option value="0">ASC</option> <option value="1">DESC</option> </select> </label> <label for="schema">ENTRY: <select id="schema" name="schema"> <option value="0">TOP-LEFT(FAST)</option> <option value="1">CENTER(FAST)</option> <option value="2">BOTTOM-RIGHT(FAST)</option> <option value="3">TOP-LEFT(NORMAL)</option> <option value="4">CENTER(NORMAL)</option> <option value="5">BOTTOM-RIGHT(NORMAL)</option> </select> </label> <button>COMPUTE</button> <button disabled="disabled">PAUSE</button> </div> <div id="main"> <div id="info"> INITIAL NUMBERS: <span class="count"></span>, EXHAUST: <span class="exhaust">0</span>ms, VISITED: <span class="visited">0</span>nodes. </div> <div class="area"> <div class="r1 c1 b1"><div class="val y">7</div></div> <div class="r1 c2 b1"></div> <div class="r1 c3 b1"></div> <br> <div class="r2 c1 b1"></div> <div class="r2 c2 b1"><div class="val y">2</div></div> <div class="r2 c3 b1"></div> <br> <div class="r3 c1 b1"></div> <div class="r3 c2 b1"></div> <div class="r3 c3 b1"><div class="val y">6</div></div> </div> <div class="area"> <div class="r1 c4 b2"></div> <div class="r1 c5 b2"></div> <div class="r1 c6 b2"></div> <br> <div class="r2 c4 b2"><div class="val y">1</div></div> <div class="r2 c5 b2"></div> <div class="r2 c6 b2"></div> <br> <div class="r3 c4 b2"></div> <div class="r3 c5 b2"></div> <div class="r3 c6 b2"></div> </div> <div class="area"> <div class="r1 c7 b3"></div> <div class="r1 c8 b3"></div> <div class="r1 c9 b3"><div class="val y">3</div></div> <br> <div class="r2 c7 b3"></div> <div class="r2 c8 b3"><div class="val y">9</div></div> <div class="r2 c9 b3"></div> <br> <div class="r3 c7 b3"><div class="val y">8</div></div> <div class="r3 c8 b3"></div> <div class="r3 c9 b3"></div> </div> <br> <div class="area"> <div class="r4 c1 b4"></div> <div class="r4 c2 b4"><div class="val y">5</div></div> <div class="r4 c3 b4"></div> <br> <div class="r5 c1 b4"></div> <div class="r5 c2 b4"></div> <div class="r5 c3 b4"></div> <br> <div class="r6 c1 b4"></div> <div class="r6 c2 b4"></div> <div class="r6 c3 b4"></div> </div> <div class="area"> <div class="r4 c4 b5"><div class="val y">4</div></div> <div class="r4 c5 b5"></div> <div class="r4 c6 b5"><div class="val y">1</div></div> <br> <div class="r5 c4 b5"></div> <div class="r5 c5 b5"><div class="val y">6</div></div> <div class="r5 c6 b5"></div> <br> <div class="r6 c4 b5"><div class="val y">5</div></div> <div class="r6 c5 b5"></div> <div class="r6 c6 b5"><div class="val y">7</div></div> </div> <div class="area"> <div class="r4 c7 b6"></div> <div class="r4 c8 b6"></div> <div class="r4 c9 b6"></div> <br> <div class="r5 c7 b6"></div> <div class="r5 c8 b6"></div> <div class="r5 c9 b6"></div> <br> <div class="r6 c7 b6"></div> <div class="r6 c8 b6"><div class="val y">4</div></div> <div class="r6 c9 b6"></div> </div> <br> <div class="area"> <div class="r7 c1 b7"></div> <div class="r7 c2 b7"></div> <div class="r7 c3 b7"><div class="val y">8</div></div> <br> <div class="r8 c1 b7"></div> <div class="r8 c2 b7"><div class="val y">1</div></div> <div class="r8 c3 b7"></div> <br> <div class="r9 c1 b7"><div class="val y">3</div></div> <div class="r9 c2 b7"></div> <div class="r9 c3 b7"></div> </div> <div class="area"> <div class="r7 c4 b8"></div> <div class="r7 c5 b8"></div> <div class="r7 c6 b8"></div> <br> <div class="r8 c4 b8"></div> <div class="r8 c5 b8"></div> <div class="r8 c6 b8"><div class="val y">4</div></div> <br> <div class="r9 c4 b8"></div> <div class="r9 c5 b8"></div> <div class="r9 c6 b8"></div> </div> <div class="area"> <div class="r7 c7 b9"><div class="val y">7</div></div> <div class="r7 c8 b9"></div> <div class="r7 c9 b9"></div> <br> <div class="r8 c7 b9"></div> <div class="r8 c8 b9"><div class="val y">2</div></div> <div class="r8 c9 b9"></div> <br> <div class="r9 c7 b9"></div> <div class="r9 c8 b9"></div> <div class="r9 c9 b9"><div class="val y">6</div></div> </div> <br> </div> <div id="template" style="display: none;" mce_style="display: none;"> <div>1</div> <div>2</div> <div>3</div> <br/> <div>4</div> <div>5</div> <div>6</div> <br/> <div>7</div> <div>8</div> <div>9</div> <br/> </div> </body> </html>