0、题目
任务目的
- 练习JavaScript在DOM、字符串处理相关知识
- 练习对于复杂UI，如何进行数据机构建模
任务描述
- 如图，命令输入框由input变为textarea，可以允许输入多条指令，每一行一条
- textarea左侧有一列可以显示当前行数的列（代码行数列），列数保持和textarea中一致
- 当textarea发生上下滚动时，代码行数列同步滚动
- 能够判断指令是否合法，不合法的指令给出提示（如图）
- 点击执行时，依次逐条执行所有命令
- 对于GO，TRA以及MOV指令增加可以移动格子数量的参数，例如
- GO 3：向当前方向前进三格
- TRA TOP 2：向屏幕上方平移两格
- MOV RIG 4：方向转向屏幕右侧，向屏幕的右侧移动四格
1、解题过程
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Task 35-听指令的小方块（三）</title> 6 <style> 7 table{ 8 display: inline-block; 9 border-spacing: 0; 10 border:2px solid black; 11 margin:10px 30px 0 50px; 12 } 13 td{ 14 border:1px solid rgba(128, 128, 128, 0.35); 15 width:40px; 16 height:40px; 17 opacity: 0.9; 18 box-sizing: border-box; 19 } 20 form{ 21 display: inline-block; 22 width:320px; 23 } 24 .selected{ 25 background-color:red; 26 } 27 .top{ 28 border-top:10px solid blue; 29 } 30 .right{ 31 border-right:10px solid blue; 32 } 33 .back{ 34 border-bottom:10px solid blue; 35 } 36 .left{ 37 border-left:10px solid blue; 38 } 39 button{ 40 margin:15px; 41 } 42 textarea:focus{ 43 outline: none; 44 } 45 #number,#input{ 46 line-height:24px; 47 padding: 0; 48 margin:0; 49 } 50 #number{ 51 position:absolute; 52 overflow: hidden; 53 height: 194px; 54 width: 20px; 55 list-style: none; 56 background-color: rgba(241, 241, 233, 0.71); 57 color: white; 58 } 59 #input{ 60 width: 270px; 61 height: 192px; 62 padding-left:24px; 63 font-size: 20px; 64 font-weight: bold; 65 background-color: black; 66 color:green; 67 } 68 .wrong{ 69 background:red; 70 } 71 .information{ 72 margin:0; 73 padding-top:10px; 74 display: inline-block; 75 border:1px solid black; 76 } 77 </style> 78 </head> 79 <body> 80 <table id="table"> 81 </table> 82 <form id="buttons"> 83 <button id="run">执行</button> 84 <button id="refresh">Refresh</button> 85 <div> 86 <ul id='number'></ul> 87 <textarea id="input" onkeyup='keyUp();' onscroll="$('number').scrollTop=this.scrollTop;"></textarea> 88 </div> 89 </form> 90 <ul class="information"> 91 点击下面按钮后，正方形会做出相应动作 92 <li>GO：向蓝色边所面向的方向前进一格</li> 93 <li>TUN LEF：向左转（逆时针旋转90度）</li> 94 <li>TUN RIG：向右转（顺时针旋转90度）</li> 95 <li>TUN BAC：向右转（旋转180度）</li> 96 <li>TRA LEF：向屏幕的左侧移动一格，方向不变</li> 97 <li>TRA TOP：向屏幕的上面移动一格，方向不变</li> 98 <li>TRA RIG：向屏幕的右侧移动一格，方向不变</li> 99 <li>TRA BOT：向屏幕的下面移动一格，方向不变</li> 100 <li>MOV LEF：方向转向屏幕左侧，并向屏幕的左侧移动一格</li> 101 <li>MOV TOP：方向转向屏幕上面，向屏幕的上面移动一格</li> 102 <li>MOV RIG：方向转向屏幕右侧，向屏幕的右侧移动一格</li> 103 <li>MOV BOT：方向转向屏幕下面，向屏幕的下面移动一格</li> 104 </ul> 105 </body> 106 </html>
index.js
1 function $(id){ 2 return document.getElementById(id); 3 } 4 var num='', 5 array=[], 6 a; 7 //检验输入内容的行数 8 function keyUp(){ 9 var str=$('input').value,n; 10 array=str.split(" "); 11 n=array.length; 12 showNum(n); 13 } 14 //显示代码行数 15 function showNum(n){ 16 for(var i=1;i<=n;i++){ 17 num+='<li id="li'+i+'">'+i+'</li>'; 18 } 19 $('number').innerHTML=num; 20 num=''; 21 } 22 //点击执行，依次执行命令 23 $('run').addEventListener("click",function(e){ 24 a=1; 25 figure=[]; 26 newArr=[]; 27 for(var i=0;i<array.length;i++){ 28 var cont=array[i].replace(/(^s*)|(s*$)/g,""); 29 //去掉首尾空格 30 cutOut(cont,i);//分别得到命令和执行的次数 31 check(newArr[i]);//检验输入代码的合规性 32 if(a==0){ 33 var id='li'+(i+1); 34 $(id).className="wrong"; 35 i=array.length-1; 36 } 37 } 38 carryOut();//依次执行命令 39 e.preventDefault(); 40 return false; 41 }); 42 //根据输入的内容得到命令和执行的次数 43 var figure=[], 44 newArr=[]; 45 function cutOut(cont,i){ 46 var fig=cont.slice(-1); 47 if(/^[0-9]*$/.test(fig)) figure[i]=fig; 48 else figure[i]=1; 49 if(cont.slice(0,2)=='GO') newArr[i]=cont.slice(0,2); 50 else newArr[i]=cont.slice(0,7); 51 } 52 //检验输入命令的合规性 53 function check(cont){ 54 if(cont=='GO'||cont=='TUN RIG'||cont=='TUN BAC'||cont=='TUN LEF'||cont=='TRA TOP'||cont=='TRA RIG'||cont=='TRA BOT'||cont=='TRA LEF'||cont=='MOV TOP'||cont=='MOV RIG'||cont=='MOV BOT'||cont=='MOV LEF') a=1; 55 else a=0; 56 } 57 //依次执行指令 58 function carryOut(){ 59 var j=0,i=0; 60 var timer=setInterval(function(){ 61 if(i<figure.length){ 62 if(j<figure[i]){ 63 move(newArr[i]); 64 j++; 65 } 66 else{ 67 i++; 68 j=0; 69 } 70 } 71 else clearInterval(timer); 72 },500); 73 } 74 var position={ 75 x:6, 76 y:6, 77 direc:1,//指示方向 上1， 右2，后3，左4 78 trans:1 //实际运动方向 上1， 右2，后3，左4 79 }; 80 //点击不同按钮 81 function move(order){ 82 switch(order){ 83 case'GO':{ 84 position.trans=position.direc; 85 go(); 86 direction(); 87 break; 88 } 89 case'TUN LEF':{ 90 if(position.direc>1) position.direc-=1; 91 else position.direc=4; 92 direction(); 93 break; 94 } 95 case'TUN RIG':{ 96 if(position.direc<4) position.direc+=1; 97 else position.direc=1; 98 direction(); 99 break; 100 } 101 case'TUN BAC':{ 102 var direc=position.direc; 103 if(direc==1||direc==3) position.direc=4-direc; 104 else position.direc=6-direc; 105 direction(); 106 break; 107 } 108 case 'TRA TOP':{ 109 position.trans=1; 110 go(); 111 direction(); 112 break; 113 } 114 case 'TRA RIG':{ 115 position.trans=2; 116 go(); 117 direction(); 118 break; 119 } 120 case 'TRA BOT':{ 121 position.trans=3; 122 go(); 123 direction(); 124 break; 125 } 126 case 'TRA LEF':{ 127 position.trans=4; 128 go(); 129 direction(); 130 break; 131 } 132 case 'MOV TOP':{ 133 position.direc=1; //改变指示方向 134 position.trans=1; 135 go(); 136 direction(); 137 break; 138 } 139 case 'MOV RIG':{ 140 position.direc=2; 141 position.trans=2; 142 go(); 143 direction(); 144 break; 145 } 146 case 'MOV BOT':{ 147 position.direc=3; 148 position.trans=3; 149 go(); 150 direction(); 151 break; 152 } 153 case 'MOV LEF':{ 154 position.direc=4; 155 position.trans=4; 156 go(); 157 direction(); 158 break; 159 } 160 } 161 } 162 //指示方向不变，以屏幕方向平移 163 function go(){ 164 var x=position.x, 165 y=position.y, 166 trans=position.trans; 167 if(x==1&&trans==1||y==10&&trans==2||x==10&&trans==3||y==1&&trans==4) return; 168 else goForward(); 169 } 170 //以屏幕方向移动 171 function goForward(){ 172 var a=position.x*10+position.y, 173 IDa='td'+a; 174 $(IDa).className=''; 175 if(position.trans==1){ 176 position.x-=1; 177 } 178 else if(position.trans==2){ 179 position.y+=1; 180 } 181 else if(position.trans==3){ 182 position.x+=1; 183 } 184 else if(position.trans==4){ 185 position.y-=1; 186 } 187 } 188 //显示表明方向的蓝色边框 189 function direction(){ 190 var c=position.x*10+position.y, 191 idc='td'+c, 192 IDc=$(idc); 193 IDc.className=''; 194 if(position.direc==1){ 195 IDc.className='selected top'; 196 } 197 if(position.direc==2){ 198 IDc.className='selected right'; 199 } 200 if(position.direc==3){ 201 IDc.className='selected back'; 202 } 203 if(position.direc==4){ 204 IDc.className='selected left'; 205 } 206 } 207 //生成棋盘 208 function origin(){ 209 var resultTr=''; 210 for(var i=1;i<11;i++){ 211 var resultTd=''; 212 for(var j=1;j<11;j++){ 213 var number=10*i+j; 214 resultTd+="<td id='td"+number+"'></td>"; 215 } 216 resultTr+='<tr>'+resultTd+'</tr>'; 217 } 218 $('table').innerHTML=resultTr; 219 //定义格子6-6的初始样式 220 $("td66").className='selected top'; 221 }; 222 origin();