Home > Developer > Web Develop
Attached code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" ><HTML> <HEAD> <TITLE> New Document </ title> <meta name= "Generator" content= "EditPlus" > <meta name= "Author" content= "" > <meta name= "keywor DS "Content=" "> <meta name=" Description "content=" "> <script type=" text/javascript "src=" Jquery-1.7.2.min.js "></script> <script type=" Text/javascript "src=" Json2.js "></script> < Style> table,td{border:1px solid gray; } </style> <script> var t=0; var color_arr=[' red ', ' yellow ', ' green ', ' blue '; var num function inittable () {$ ("#container"). HTML ("); var table=$ (" <table></table> "); Num=math.pow (2,parseint ($ ("#txt_k"). Val ())); var width=document.body.clientwidth*0.4/num;for (var i=0;i<num;i++ {var tr=$ ("<tr style= ' width:" +width*num+ "Px;height:" +width+ "PX; ' ></tr> "); for (Var j=0;j<num;j++) {var td=$ ("<td style= ' width:" +width+ "Px;height:"+width+" PX; ' > </td> "); if (I==parseint ($ ("#txt_x"). Val ()) -1&&j==parseint ($ ("#txt_y"). Val ())-1) td.css ("Background-color", "Black "); Tr.append (TD); } table.append (tr);} $ ("#container"). Append (table); } function Calctable () {var dr=parseint ($ ("#txt_x"). Val ()) -1;var Dc=parseint ($ ("#txt_y"). Val ())-1; Chessboard (0,0,dr,dc,num); }//TR TC Sub checkerboard left upper corner coordinate Dr DC special lattice coordinates size sub checkerboard lattice number function chessboard (tr,tc,dr,dc,size) {var s,t1; if (size==1) Return;t1=t++;s=size/2;var color=color_arr[t1%4];//-------------The upper-left sub-chessboard-----------------if (dr<t R+s&&dc<tc+s) {//special lattice in upper right corner, recursive processing sub-checkerboard chessboard (tr,tc,dr,dc,s);} else{//handles the bottom right corner of the chessboard around the split point//Mark special Checkerboard $ ("Table tr"). EQ (tr+s-1). Find ("TD"). EQ (tc+s-1). CSS ("Background-color", color); Chessboard (tr,tc,tr+s-1,tc+s-1,s); }//--------------the upper right-hand corner of the chessboard-------------------if (dr>=tr+s&&dc<tc+s) {chessboard (tr+s,tc,dr,dc,s);} else{//Bottom left lattice $ ("Table tr"). EQ (tr+s). Find ("TD"). EQ (tc+s-1). CSS ("Background-color", COlor); chessboard (tr+s,tc,tr+s,tc+s-1,s); }//--------------The lower left corner of the chessboard-------------------if (dr<tr+s&&dc>=tc+s) {chessboard (tr,tc+s,dr,dc,s);} else{$ ("Table tr"). EQ (tr+s-1). Find ("TD"). EQ (tc+s). CSS ("Background-color", color); Chessboard (Tr,tc+s,tr+s-1,tc+s, s); }//--------------The lower right-hand corner of the chessboard-------------------if (dr>=tr+s&&dc>=tc+s) {chessboard (tr+s,tc+s,dr,dc,s);} else{//settimeout ("SetColor" ("+tr+s+", "+tc+s+", "+color+" ') ", 1000); $ ("Table tr"). EQ (tr+s). Find ("TD"). EQ (tc+s). CSS ("Background-color", color); chessboard (tr+s,tc+s,tr+s,tc+s,s); }} </script> </HEAD> <body style= "Text-align:center" > <div> series: <input type = "text" id= "Txt_k"/> coordinates x:<input type= "text" id= "txt_x"/> coordinates y:<input type= "text" id= "txt_y"/>& Lt;input type= "button" id= "BTN" value= "Initialize table" onclick= "inittable ()"/><input type= "button" id= "BTN" value= " Start Board Overlay "onclick=" calctable () "/> </div> <div id= ' container ' style="margin:0 auto; " > </div> </BODY></HTML>
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
JS Demo Board Overlay
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
