js面向对象（json对象、继承、面向对象拖拽）

最新推荐文章于 2022-03-08 19:26:16 发布

柏油

最新推荐文章于 2022-03-08 19:26:16 发布

阅读量596

点赞数

分类专栏： # JAVA WEB

本文链接：https://blog.csdn.net/ldw201510803006/article/details/75304108

版权

JAVA WEB 专栏收录该内容

59 篇文章 3 订阅

订阅专栏

案例1：json面向对象

<!DOCTYPE html>
<html>
	<head>
		·<meta charset="utf-8">
		<title></title>
		<script>
			//json简单，不适合多个对象；整个程序中只有一个，写起来比较简单
			var JSON = {
				name : 'LDW',
				qq : '20237199',
				showName :function(){
					alert(this.name);
				},
				showQq : function(){
					alert(this.qq);
				}
			}
			
			JSON.showQq();
		</script>
	</head>
	<body>
	</body>
</html>

案例2：继承问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function A (){
				this.abc = 12;
			}
			
			A.prototype.show = function(){
				alert(this.abc);
			}
			
			function B (){
				//call可以改变原来中的this
				A.call(this);
			}
			
			//B.prototype.show = A.prototype.show ;
			//用以解决引用问题
			for(var i in A.prototype ){
				B.prototype[i] = A.prototype[i];
			}
			
			B.prototype.fn = function(){
				alert('fn');
			}			
			var objB = new B();
			
			//objB.show();
			//alert(objB.abc);
			
			//引用问题
			var objA = new A();
			
			objA.fn();
			//objB.fn();
		</script>
	</head>
	<body>
	</body>
</html>

案例3：面向过程拖拽

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1 {height: 200px;width: 200px;background: red;position: absolute;}
		</style>
		<script>
			window.onload = function(){
				var oDiv = document.getElementById('div1');
				
				oDiv.onmousedown = function(ev){
					var oEvent = ev || event ;
					var disX = oEvent.clientX - oDiv.offsetLeft;
					var disY = oEvent.clientY - oDiv.offsetTop;
					
					document.onmousemove = function(ev){
						var oEvent = ev || event ;
						
						oDiv.style.left = oEvent.clientX - disX + 'px';
						oDiv.style.top = oEvent.clientY - disY + 'px';
					}
					
					document.onmouseup = function(){
						document.onmousemove = null;
						document.onmouseup = null;
					}
				}
			}
		</script>
	</head>
	<body>
		<div id = 'div1'></div>
	</body>
</html>

案例4：面向对象拖拽

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1 {height: 200px;width: 200px;background: red;position: absolute;}
		</style>
		<script>
			
			window.onload = function(){
				new Drag('div1');
			}
			
			function Drag(id){
				var _this = this;
				this.oDiv = document.getElementById(id);
				this.disX = 0;
				this.disY = 0;
				this.oDiv.onmousedown = function (ev){
					_this.fnDown(ev);
				}
			}
			
			Drag.prototype.fnDown = function(ev){
					var oEvent = ev || event ;
					this.disX = oEvent.clientX - this.oDiv.offsetLeft;
					this.disY = oEvent.clientY - this.oDiv.offsetTop;
					var _this = this;
					
					document.onmousemove = function(ev){
						_this.fnMove(ev);
					};
					
					document.onmouseup = function(){
						_this.fnUp();
					};
				}
			Drag.prototype.fnMove = function(ev){
						var oEvent = ev || event ;
						
						this.oDiv.style.left = oEvent.clientX - this.disX + 'px';
						this.oDiv.style.top = oEvent.clientY - this.disY + 'px';
					}
			
			Drag.prototype.fnUp = function(){
						document.onmousemove = null;
						document.onmouseup = null;
					}
			
		</script>
	</head>
	<body>
		<div id = 'div1'></div>
	</body>
</html>

案例5：面向对象拖拽--继承

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1 {height: 200px;width: 200px;background: red;position: absolute;}
		</style>
		<script src="JS/Drag1.js"></script>
		<script src="JS/Drag2.js"></script>
		<script>
			
			window.onload = function(){
				new Drag2('div1');
			}

		</script>
	</head>
	<body>
		<div id = 'div1'></div>
	</body>
</html>

Drag1.js:

function Drag(id){
				var _this = this;
				this.oDiv = document.getElementById(id);
				this.disX = 0;
				this.disY = 0;
				this.oDiv.onmousedown = function (ev){
					_this.fnDown(ev);
				}
			}
			
			Drag.prototype.fnDown = function(ev){
					var oEvent = ev || event ;
					this.disX = oEvent.clientX - this.oDiv.offsetLeft;
					this.disY = oEvent.clientY - this.oDiv.offsetTop;
					var _this = this;
					
					document.onmousemove = function(ev){
						_this.fnMove(ev);
					};
					
					document.onmouseup = function(){
						_this.fnUp();
					};
				}
			Drag.prototype.fnMove = function(ev){
						var oEvent = ev || event ;
						
						this.oDiv.style.left = oEvent.clientX - this.disX + 'px';
						this.oDiv.style.top = oEvent.clientY - this.disY + 'px';
					}
			
			Drag.prototype.fnUp = function(){
						document.onmousemove = null;
						document.onmouseup = null;
					}

Drag2.js:

function Drag2(id){
				Drag.call(this,id);        //继承属性
			}
			
			for(var i in Drag.prototype){  //继承方法
				Drag2.prototype[i] = Drag.prototype[i];
			}
			
			//方法重写
			Drag2.prototype.fnMove = function(ev){
						var oEvent = ev || event ;
						
						var x = oEvent.clientX - this.disX;
						var y = oEvent.clientY - this.disY;
						if(x < 0){
							x = 0;
						}
						else if(x > document.documentElement.clientWidth - this.oDiv.offsetWidth){
							x= document.documentElement.clientWidth - this.oDiv.offsetWidth;
						}
						
						if(y < 0){
							y = 0;
						}
						else if (y > document.documentElement.clientHeight - this.oDiv.offsetHeight){
							y = document.documentElement.clientHeight - this.oDiv.offsetHeight;
						}
						this.oDiv.style.left = x + 'px';
						this.oDiv.style.top = y + 'px';
					}

柏油

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js面向对象（json对象、继承、面向对象拖拽）

案例1：json面向对象 · //json简单，不适合多个对象；整个程序中只有一个，写起来比较简单 var JSON = { name : 'LDW', qq : '20237199', showName :function(){ alert(this.name); }, showQq : function()
复制链接

扫一扫