<div class="htmlarea"> <textarea id="runcode66030"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>자바스크립트 픽셀 퍼즐 게임</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-height: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> <div class="container" id="container"> </div> <div class="caption" id="caption"> <h2> </h2>설명<ul> <li> </li>1. 마우스를 움직여 웹페이지의 사각형을 클릭하여 그래픽을 입력하세요. <li> </li>2. 특정 점이 만족스럽지 않으면 다시 클릭하여 제거하세요. <li> <input type="button" value="重新开始" class="inputbutton">3. 다시 시작하려면 여기를 클릭하세요: <input type="text" class="inputtxt"> 또는 재설정: <input type="text" class="inputtxt"> 열 <input type="button" value="重新生成" class="inputbutton"> 행 </li> </ul> </div> </textarea> <br><input onclick="runEx('runcode66030')" type="button" value="运行代码"><input onclick="doCopy('runcode66030')" type="button" value="复制代码"> <input onclick="doSave(runcode66030)" type="button" value="保存代码"> <a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">[Ctrl A 모두 선택 참고: </a>외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 </div>]<script language="javascript" type="text/javascript"> /*=================== copyright:http://www.wxwdesign.cn 转载请保留此信息和作者网站链接 ====================*/ window.onload=function(){ var n=22; //默认行数 var L=23; //默认每行显示个数 var acontent="+"; //默认方格里显示的符号 var color=new Array("#ea991f","#cc994b","#ae9979","#999999"); 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");a.innerHTML=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");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").appendChild(content); var a=document.getElementsByTagName("a"); for(var i=21;i<a.length;i++){ a[i].onclick=function(){if(!this.i){this.style.color="#ff0000";this.style.backgroundColor="#FF9900"}else{this.style.color="#FFFFFF";this.style.backgroundColor="#999999"};this.i=!this.i} a[i].onfocus=function(){this.blur()} a[i].onmouseover=function(){this.style.backgroundColor="#FF9900"} a[i].onmouseout=function(){var obj=this;var j=0;function dc(){if(j<color.length&&!obj.i){setTimeout(dc,200);obj.style.backgroundColor=color[j];j++}};dc()}; }} init(n,L); function getid(id){return document.getElementById(id)} var input=document.getElementsByTagName("input"); input[0].onclick=function(){window.location.reload()} input[3].onclick=function(){getid("container").innerHTML="";init(parseInt(input[2].value),parseInt(input[1].value))} } </script>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
