第221行赋值为1 然后不同状态改变它的值 240行进行判断
我在控制台检测它的值 为什么是空
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>task3-3</title>
<style type="text/css">
.box {
position: relative;
width: 500px;
height: 500px;
margin: 100px auto 20px auto;
border: 2px solid black;
}
.container {
width: 100%;
height: 100%;
font-size: 0;
}
.container div {
box-sizing: border-box;
width: 10%;
height: 10%;
display: inline-block;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.cont_row{
position: absolute;
margin-top: -50px;
width: 100%;
height: 10%;
}
.cont_row div,.cont_col div{
height: 50px;
width: 50px;
float: left;
display: inline-block;
text-align: center;
line-height: 50px;
}
.cont_col{
position: absolute;
margin-top: -500px;
margin-left: -50px;
width: 10%;
height: 100%;
}
form{margin-top: 30px;}
#myBox{
position: absolute;
top: 350px;
left: 250px;
box-sizing: border-box;
width: 50px;
height: 50px;
background-color: #ec3325;
border: none;
transition: all 1s linear;
}
#myHead{
position: absolute;
box-sizing: border-box;
width: 50px;
height: 15px;
background-color:#001df5 ;
border: none;
}
</style>
</head>
<body>
<div class="box">
<div class="cont_row">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="myBox"><div id="myHead"></div></div>
</div>
<div class="cont_col">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
<form action="#">
<input style="width:200px; height: 25px; " type="text" id="order">
<input type="button" value="执行" id="action">
</form>
<p>指令有：GO：向蓝色边所面向的方向前进一格<br>
TUN LEF：向左转（逆时针旋转90度）<br>
TUN RIG：向右转（顺时针旋转90度）<br>
TUN BAC：向右转（旋转180度）</p>
</div>
<script>
//规定方向 1：上， 2：右 ，3：下， 4：左。dir属性储存方向值,方向控制go命令的走法
//旋转 注意累计角度值即可
var act = document.getElementById("action");
var order = document.getElementById("order");
var mybox = document.getElementById("myBox");
var angle=0;//角度计数
mybox.dir=1;
function takeOrder() {
if(order.value=="TUN LEF"){
//为了不出现负方向先进行判断
if(mybox.dir==1){mybox.dir=5;}
mybox.dir=(mybox.dir-1)%4;
mybox.style.transform="rotate("+(angle-90)+"deg)";
angle=-90+angle;
}
if(order.value=="TUN RIG"){
mybox.dir=(mybox.dir+1)%4;
mybox.style.transform="rotate("+(angle+90)+"deg)";
angle=90+angle;
}
if(order.value=="TUN BAC"){
mybox.dir=(mybox.dir+1)%4;
mybox.style.transform="rotate("+(angle+180)+"deg)";
angle=180+angle;
}
if(order.value=="GO"){
mybox.dir=1;
if(mybox.dir==1){mybox.style.transform="translate(0,50px)";}
if(mybox.dir==2){mybox.style.transform="translate(50px,0)";}
if(mybox.dir==3){mybox.style.transform="translate(0,-50px)";}
if(mybox.dir==4){mybox.style.transform="translate(-50px,0)";}
}
}
window.onload=function () {
act.onclick=takeOrder;
}
</script>
</body>
</html>
