js面向对象（json对象、继承、面向对象拖拽）
2017-07-18 14:54
513 查看
案例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';
}
<!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';
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS面向对象组件（四） -- 面向对象的继承
- JS面向对象（2） -- this的使用，对象之间的赋值，for...in语句，delete使用，成员方法，json对象的使用，prototype的使用，原型继承与原型链
- JS面向对象组件（六） -- 拖拽功能以及组件的延展
- js面向对象练习（二）：JS面向对象的思路（canvas）写躁动的小球
- js面向对象和继承
- 重操JS旧业第八弹：面向对象与继承
- js两种形式写淡入弹出轮播图（面向对象和不面向对象）
- 面向对象继承-限制范围的拖拽
- 实用JS系列——面向对象中的类和继承
- 前端-JS基于原型面向对象（对象创建，继承，构造等）
- 面向对象第九课，面向对象三大基本特征，继承，Object用法，toString和equals方法
- 深入js的面向对象学习篇（继承篇）——温故知新（三）
- javascript 面向对象基础(四)面向对象的继承
- node.js面向对象实现（二）继承
- js 面向对象继承 动物叫声比赛版
- Acticle 11:javascript面向对象：js的面向对象
- 分别用普通过程，面向对象过程，和继承方法实现拖拽效果
- JS面向对象，从创建对象到对象继承
- node.js面向对象实现（二）继承
- js面向对象初步探究（上） js面向对象的5种写方法