<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = UTF-8 "/> <title> JavaScript pixel puzzle game </title> <style type =" text/css "media =" all "> body {margin: 0px; padding: 0px; background-color: #111111; font-family: Arial, Helvetica, sans- Serif, "";}. container {background-color: # CCCCCC; padding: 0px 0px 0px 1px; width: 609px; margin: 0px auto; font-size: 12px; height: auto; overflow: hidden ;}. container. line ,. container. line2 {width: 100%; height: auto; overflow: hidden ;}. container. line2 a {color: # ababab; background-color: #666666 ;}. container a {display: block; float: left; background-color: #999999; margin-right: 1px; margin-top: 1px; Width: 28px; text-align: center; padding: 4px 0px; text-decoration: none; color: # FFFFFF; font-weight: bold; cursor: pointer ;}. caption {margin: 0px auto; width: 608px; height: auto; overflow: hidden; padding: 1px; background-color: # CCCCCC ;}. caption h2 {margin: 0px; padding: 3px; text-align: center; font-size: 12px; background-color: #666666 ;}. caption ul {margin: 0px; padding: 0px 16px; list-style: none; line-he Ight: 22px; font-size: 12px ;}. inputtxt {width: 30px; height: 12px; font-size: 12px; color: # FF6600; font-weight: bold; text-align: center ;}. inputbutton {border: #666666 1px solid; height: 18px ;}. caption ul a {color: #333333 ;}. caption ul li {border-bottom: #666666 1px dashed ;} </style> <script language = "javascript" type = "text/javascript">/* ==================== copyright: http://www.wxwdesign.cn reprinted please keep this information and author Network Site link =================================== */window. onload = function () {var n = 22; // default number of rows var L = 23; // The default number of rows is displayed var acontent = "+ "; // The symbol var color = new Array ("# ea991f", "# cc994b", "# ae9979", "#999999") displayed in the default square "); var init = function (num, len) {var content = document. createDocumentFragment (); var firstline = document. createElement ("div"); firstline. className = "line2"; for (var I = 0; I <len; I ++) {var a = document. createElement ("a");. innerHTM L = I + 1; firstline. appendChild (a)} content. appendChild (firstline); for (var I = 0; I <num; I ++) {var div = document. createElement ("div"); div. className = "line"; for (var j = 0; j <len; j ++) {var a = document. createElement ("a");. innerHTML = acontent; div. appendChild (a) ;}; content. appendChild (div);} getid ("container "). style. width = String (29 * len) + "px"; getid ("caption "). style. width = String (29 * len-1) + "px"; getid ("container "). appen DChild (content); var a = document. getElementsByTagName ("a"); for (var I = 21; I </pead> <body> description <ul> <li> 1. move the mouse and click in the square of the webpage to spell out the image. </Li> <li> 2. If you are not satisfied with a certain point, click again to eliminate it. </Li> <li> 3. if you want to start again, click here: <input type = "button" value = "restart" class = "inputbutton"/> or reset: <input type = "text" class = "inputtxt"/> <input type = "text" class = "inputtxt"/> row <input type = "button" value =" regenerate "class =" inputbutton "/> </li> </ul> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]