日期:2014-05-16 浏览次数:20403 次
1.js代码使用CloneNode(true)克隆DOM节点(包含子节点)创建多个九宫格,并用CSS将其渲染成不同的效果;
2.面向对象的设计结构;mvc分层设计
3.推断的时候使用可能值排除法,当无法明确推断的时候,寻找可能值个数最少的节点开始(这个是重点),先压栈保存状态,然后尝试填充,继续推断或猜测,直到得到答案,或者出错回滚排除错误值后向另一个方向继续
<!-- copy all right , barenx@163.com -->
<html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta http-equiv="Description" content="there is one shoudu online demo"> <meta http-equiv="Keywords" content="shoudu;javascript;css;web design;dom"> <meta http-equiv="Auther" content="barenx"> <title>sodu demo--PowerBy Barenx</title> <script language="javascript" type="text/javascript" src="g.js"></script> <style type="text/css"> body{ text-align:center; margin:5px; } /*big display number block*/ #tb td, #hx td{ width:47px; height:47px; font-size:17px; font-family:Verdana, Arial, Helvetica, sans-serif; vertical-align:middle; text-align:center; work-break:break-all; border:1px #FFFFFF solid; } #tb td{ border:#ffffff dotted 1px; font-weight:bold; } #hx td{ cursor:pointer; background:#99FFFF; } /*main div block*/ #lp1{ width:auto; height:auto; float:left; border:1px #00CC33 solid; } #lp1 table{ margin:2px auto } #lp1 hr{ width:480px; } /*information div block*/ #rp1{ display:block; width:510px; height:auto; float:left; border:none; margin:auto 5px; padding:3px; } #rp1 td { width:14px; height:14px; font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; vertical-align:middle; text-align:center; work-break:break-all; float:none; } #rp1 table{ table-layout:fixed; border:1px #CC0033 solid; margin:2px; float:left; } /*debug div block*/ #debugWin{ width:100%; height:60px; margin:3px; display:block; padding-bottom:15px; text-align:left; } #debugWin div{ width:100%; margin:0 40px 1px 1px; padding:0 20px 0 12px; border:1px solid #000099; height:50px; overflow-y:scroll; text-align:left; word-break:break-all; font-size:10px; } #debugWin input{ width:85px; height:auto; font:Verdana, Arial, Helvetica, sans-serif; font-size:1.75ex; } </style> </head> <body> <div id=debugWin></div> <div id=lp1></div> <div id=rp1></div> </body> <script language="javascript" type="text/javascript"> //Copyright(C) 2008 BAREN Productions. All rights reserved. var ihx={ //choiced number val:0, //nine pane, td block object [1-9] O:[], //td block onclick callback function click:function(id){ if(id==this.val)return; if(this.O[this.val]){ with(this.O[this.val].style){ background="#99ffff"; color="#000"; fontWeight=""; } } var y=this.O[id]; if(!y)return false; with(y.style){ background="#ffff99"; color="#a11"; fontWeight="bold"; } this.val=id; }, //initialization function ---create events' function to change css style Create:function(id){