耀耀学院/task4.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			html,body{
				margin: 0;
			}
			table{
				position: relative;
			}
			td{
				border: 1px solid #888888;
				width: 50px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				box-sizing: border-box;
			}
			.header td{
				border: none;
			}
			table tr td:first-child{
				border: none;
			}
			span{
				display: inline-block;
			}
			#box{
				width: 50px;
				height: 50px;
				background-color: red;
				position: absolute;
				transition-property: transform,border-radius;
				transition-duration: 1s,1s;
				transition-delay: 1s,0s;
				overflow: hidden;
			}
			#box .box-top{
				width: 50px;
				height: 15px;
				background-color: blue;
				vertical-align: top;				
			}
		</style>
	</head>
	<body>
		<table border="0" cellspacing="0" cellpadding="0" id="table">
			<tr class="header">
				<td></td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>6</td>
				<td>7</td>
				<td>8</td>
				<td>9</td>
				<td>10</td>
			</tr>
			<tr>
				<td>1</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>2</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>3</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>4</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>5</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>6</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>7</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>8</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>9</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>10</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<span id="box" style="top: 250px;left: 250px;"><span class="box-top"></span></span>
		</table>
		<input type="text" id="order" />
		<input type="button" id="button" value="执行" />
		<script type="text/javascript">
			var box = document.querySelector("#box");
			var oInput = document.querySelector("#order");
			var btn = document.querySelector("#button");
			//创建方向标记
			var i = 0;
			//动画执行标记
			var rotateFlag= true;
			
			function borderRchange(){
				box.style.borderRadius="50%";
				setTimeout(function(){
						box.style.borderRadius="0";
						rotateFlag = true;
					},2000)
			}
			
			function run(){
				var oInputValue = oInput.value.toUpperCase();
				if(oInputValue=="GO"){
					dir = i%4;//-3,-2,-1,0,1,2,3 -1和3为左 / 1和-3为右/ 2和-2为下/  0为上
					var top = Number(box.style.top.replace("px","")); //获取到的为字符串，用Number()方法转化为数字，便于后面的计算
					var left = Number(box.style.left.replace("px",""));
					if(dir == 0){
						if(top<=500&&top > 50){
							top-=50;
							box.style.top=top+"px";
						}
					}
					if(dir == 1||dir == -3){
						if(left<500 && left >= 50){
							left+=50;
							box.style.left=left+"px";
						}
					}
					if(dir == 2||dir == -2){
						if(50<=top && top <500){
							top+=50;
							box.style.top=top+"px";
						}
					}
					if(dir == -1||dir == 3){
						if(50< left && left <= 500){
							left-=50;
							box.style.left=left+"px";
						}
					}
				}
				if(oInputValue=="TUN LEF"){
					if(rotateFlag){
						rotateFlag = false;
						i-=1;
						box.style.transform="rotate("+90*i+"deg)";
						borderRchange()
					}
				}
				if(oInputValue=="TUN RIG"){
					if(rotateFlag){
						rotateFlag = false;
						i+=1;
						box.style.transform="rotate("+90*i+"deg)";
						borderRchange()					
					}
				}
				if(oInputValue=="TUN BAC"){
					if(rotateFlag){
						rotateFlag = false;
						i+=2;
						box.style.transform="rotate("+90*i+"deg)";
						borderRchange()				
					}
				}
				
			}
			
			btn.addEventListener("click",function(){
				run();
			})
		</script>
	</body>
</html>