JSP中的DOM编程实践-优快云博客

本文链接：https://blog.youkuaiyun.com/ALL_Dash/article/details/8892812

最近学了JSP 感觉JSP不同于PHP 好多函数可以写而且原型对象（类）不同于其他语言的定义感觉学起来有点吃力现在总算跨过了菜鸟级别接下来得学一下JSP中的DOM编程

以下是最近做出来的马里奥是根据韩顺平老师的视频自己慢慢敲出来的建议大家学的时候看完之后晚上自己把代码复习一遍

mario.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--引入css文件-->
<link href="mario.css" type="text/css" rel="stylesheet" />
<script language="javascript" type="text/javascript">
	
	//设计Mario类
	function Mario(){
		
		this.x=0;
		this.y=0;
		
		//移动 0->上 1->右 2->下 3->左 
		this.move=function(direct){
			
			switch(direct){
				
				case 0:
					window.alert("上移动");
					var mymario=document.getElementById('mymario');
					var top=mymario.style.top;
					top=parseInt(top.substr(0,top.length-2));
					if(top<=8){
						window.alert("马里奥不能向上移动了");
					}
					else{
						mymario.style.top=(top-10)+"px";
					}
					break;
				case 1:
					window.alert("右移动");
					//这里为了改变img的left和top，我们需要得到img元素
					var mymario=document.getElementById('mymario');
					var left=mymario.style.left;
					left=parseInt(left.substr(0,left.length-2));
					if(left>=458){
						window.alert("马里奥不能向右移动了");
					}
					else{
						mymario.style.left=(left+10)+"px";
					}
					break;
				case 2:
					window.alert("下移动");
					var mymario=document.getElementById('mymario');
					var top=mymario.style.top;
					top=parseInt(top.substr(0,top.length-2));
					if(top>=346){
						window.alert("马里奥不能向下移动了");
					}
					else{
						mymario.style.top=(top+10)+"px";
					}
					break;
				case 3:
					window.alert("左移动");
					var mymario=document.getElementById('mymario');
					var left=mymario.style.left;
					left=parseInt(left.substr(0,left.length-2));
					if(left<=8){
						window.alert("马里奥不能向左移动了");
					}
					else{
						mymario.style.left=(left-10)+"px";
					}
					break;
			}
		}		
	}
	
	//创建Mario对象
	var mario=new Mario();
	
	//全局函数
	function marioMove(direct){
		switch(direct){
				
				case 0:
					mario.move(direct);
					break;
				case 1:
					mario.move(direct);
					break;
				case 2:
					mario.move(direct);
					break;
				case 3:
					mario.move(direct);
					break;
			}
	}
</script>
</head>

<body>
<div class="gamediv">
<img id="mymario" style="width:50px;left:8px;top:8px;position:absolute;" src="mario.jpg" />
</div><br />
<table class="controlcenter">
<tr><td colspan="3">游戏键盘</td></tr>
<tr><td>**</td><td><input type="button" value="↑" οnclick="marioMove(0)" /></td><td>**</td></tr>
<tr><td><input type="button" value="←" οnclick="marioMove(3)" /></td><td>**</td><td><input type="button" value="→" οnclick="marioMove(1) "/></td></tr>
<tr><td>**</td><td><input type="button" value="↓" οnclick="marioMove(2)" /></td><td>**</td></tr>
</table>
</body>
</html>

mario.css

/* CSS Document */

.gamediv{
	width:500px;
	height:400px;
	background-color:pink;
}

/*表格样式*/
.controlcenter{
	width:200px;
	height:100px;
	border:1px solid red;
}