本文目录一览：
- 1、javascript脚本实例
- 2、JS基于面向对象实现的拖拽库实例
- 3、javascript中Array数组的迭代方法实例分析
- 4、javascript有哪些著名实例！？
- 5、JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
- 6、求javascript仿面向对象编程实例代码（简单明了的，呵呵~）
javascript脚本实例
试试这个，可能对象没有创建出来。
date_object = new Date();
if(date_object)
{
what_to_say = date_object.toLocaleString();
alert(what_to_say);
}
else alert("Date object is not created!");
JS基于面向对象实现的拖拽库实例
本文实例讲述了JS基于面向对象实现的拖拽库。分享给大家供大家参考。具体如下：
这是一个面向对象的JS拖拽库，可设置水平锁定、垂直锁定、锁定位置、锁定范围等，设定这些范围后，只能在设定的模式下拖动，我觉得这是个挺不错的拖拽实例。
运行效果截图如下：
在线演示地址如下：
具体代码如下：
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/
title拖拽库/title
style
type="text/css"
div,h2,p{margin:0;padding:0;}
body{font:14px/1.5
arial;}
#box{width:100px;height:100px;background:#fef4eb;padding:5px;margin:50px;border:1px
solid
#f60;}
#box
.title{height:25px;background:#f60;}
#tool{margin-bottom:10px;}
/style
script
type="text/javascript"
function
Drag()
{
//初始化
this.initialize.apply(this,
arguments)
}
Drag.prototype
=
{
//初始化
initialize
:
function
(drag,
options)
{
this.drag
=
this.$(drag);
this._x
=
this._y
=
0;
this._moveDrag
=
this.bind(this,
this.moveDrag);
this._stopDrag
=
this.bind(this,
this.stopDrag);
this.setOptions(options);
this.handle
=
this.$(this.options.handle);
this.maxContainer
=
this.$(this.options.maxContainer);
this.maxTop
=
Math.max(this.maxContainer.clientHeight,
this.maxContainer.scrollHeight)
-
this.drag.offsetHeight;
this.maxLeft
=
Math.max(this.maxContainer.clientWidth,
this.maxContainer.scrollWidth)
-
this.drag.offsetWidth;
this.limit
=
this.options.limit;
this.lockX
=
this.options.lockX;
this.lockY
=
this.options.lockY;
this.lock
=
this.options.lock;
this.onStart
=
this.options.onStart;
this.onMove
=
this.options.onMove;
this.onStop
=
this.options.onStop;
this.handle.style.cursor
=
"move";
this.changeLayout();
this.addHandler(this.handle,
"mousedown",
this.bind(this,
this.startDrag))
},
changeLayout
:
function
()
{
this.drag.style.top
=
this.drag.offsetTop
+
"px";
this.drag.style.left
=
this.drag.offsetLeft
+
"px";
this.drag.style.position
=
"absolute";
this.drag.style.margin
=
"0"
},
startDrag
:
function
(event)
{
var
event
=
event
||
window.event;
this._x
=
event.clientX
-
this.drag.offsetLeft;
this._y
=
event.clientY
-
this.drag.offsetTop;
this.addHandler(document,
"mousemove",
this._moveDrag);
this.addHandler(document,
"mouseup",
this._stopDrag);
event.preventDefault
event.preventDefault();
this.handle.setCapture
this.handle.setCapture();
this.onStart()
},
moveDrag
:
function
(event)
{
var
event
=
event
||
window.event;
var
iTop
=
event.clientY
-
this._y;
var
iLeft
=
event.clientX
-
this._x;
if
(this.lock)
return;
this.limit
(iTop
(iTop
=
0),
iLeft
(iLeft
=
0),
iTop
this.maxTop
(iTop
=
this.maxTop),
iLeft
this.maxLeft
(iLeft
=
this.maxLeft));
this.lockY
||
(this.drag.style.top
=
iTop
+
"px");
this.lockX
||
(this.drag.style.left
=
iLeft
+
"px");
event.preventDefault
event.preventDefault();
this.onMove()
},
stopDrag
:
function
()
{
this.removeHandler(document,
"mousemove",
this._moveDrag);
this.removeHandler(document,
"mouseup",
this._stopDrag);
this.handle.releaseCapture
this.handle.releaseCapture();
this.onStop()
},
//参数设置
setOptions
:
function
(options)
{
this.options
=
{
handle:
this.drag,
//事件对象
limit:
true,
//锁定范围
lock:
false,
//锁定位置
lockX:
false,
//锁定水平位置
lockY:
false,
//锁定垂直位置
maxContainer:
document.documentElement
||
document.body,
//指定限制容器
onStart:
function
()
{},
//开始时回调函数
onMove:
function
()
{},
//拖拽时回调函数
onStop:
function
()
{}
//停止时回调函数
};
for
(var
p
in
options)
this.options[p]
=
options[p]
},
//获取id
$
:
function
(id)
{
return
typeof
id
===
"string"
?
document.getElementById(id)
:
id
},
//添加绑定事件
addHandler
:
function
(oElement,
sEventType,
fnHandler)
{
return
oElement.addEventListener
?
oElement.addEventListener(sEventType,
fnHandler,
false)
:
oElement.attachEvent("on"
+
sEventType,
fnHandler)
},
//删除绑定事件
removeHandler
:
function
(oElement,
sEventType,
fnHandler)
{
return
oElement.removeEventListener
?
oElement.removeEventListener(sEventType,
fnHandler,
false)
:
oElement.detachEvent("on"
+
sEventType,
fnHandler)
},
//绑定事件到对象
bind
:
function
(object,
fnHandler)
{
return
function
()
{
return
fnHandler.apply(object,
arguments)
}
}
};
//应用
window.onload
=
function
()
{
var
oBox
=
document.getElementById("box");
var
oTitle
=
oBox.getElementsByTagName("h2")[0];
var
oSpan
=
document.getElementsByTagName("span")[0];
var
oDrag
=
new
Drag(oBox,
{handle:oTitle,
limit:false});
var
aInput
=
document.getElementsByTagName("input");
//锁定范围接口
aInput[0].onclick
=
function
()
{
oDrag.limit
=
!oDrag.limit;
this.value
=
oDrag.limit
?
"取消锁定范围"
:
"锁定范围"
};
//水平锁定接口
aInput[1].onclick
=
function
()
{
oDrag.lockX
=
!oDrag.lockX;
this.value
=
oDrag.lockX
?
"取消水平锁定"
:
"水平锁定"
};
//垂直锁定接口
aInput[2].onclick
=
function
()
{
oDrag.lockY
=
!oDrag.lockY;
this.value
=
oDrag.lockY
?
"取消垂直锁定"
:
"垂直锁定"
};
//锁定位置接口
aInput[3].onclick
=
function
()
{
oDrag.lock
=
!oDrag.lock;
this.value
=
oDrag.lock
?
"取消锁定位置"
:
"锁定位置"
};
//开始拖拽时方法
oDrag.onStart
=
function
()
{
oSpan.innerHTML
=
"开始拖拽"
};
//开始拖拽时方法
oDrag.onMove
=
function
()
{
oSpan.innerHTML
=
"left:"
+
this.drag.offsetLeft
+
",
top:"
+
this.drag.offsetTop
};
//开始拖拽时方法
oDrag.onStop
=
function
()
{
oSpan.innerHTML
=
"结束拖拽"
};
};
/script
/head
body
div
id="tool"
input
type="button"
value="锁定范围"
/
input
type="button"
value="水平锁定"
/
input
type="button"
value="垂直锁定"
/
input
type="button"
value="锁定位置"
/
/div
p拖放状态：span未开始/span/p
div
id="box"
h2
class="title"/h2
/div
/body
/html
希望本文所述对大家的JavaScript程序设计有所帮助。
javascript中Array数组的迭代方法实例分析
这篇文章主要介绍了javascript中Array数组的迭代方法,实例分析了Array数组的迭代方法定义与使用技巧,需要的朋友可以参考下
本文实例讲述了javascript迭代的方法。分享给大家供大家参考。具体实现方法如下：
代码如下:
//filter()
利用指定的函数确定是否返回数组中包涵的某一项
var
num
=
[1,2,3,4,5,6,12];
num.filter(function(item,
index,
array){
return
(item
2);
//[3,
4,
5,
6,
12]
});
//map()
返回一个数组，数组中每一项都是在原始数组中的对应项上运行传入参数的结果
var
num
=
[1,2,3,4,5,4,3,2,1];
num.map(function(item,
index,
array){
return
(item
*
2);
//[2,
4,
6,
8,
10,
8,
6,
4,
2]
});
//every()
some()
,查询数组中的某个项是否符合某个条件
every()必须传入的参数每一个都返回true,结果才为true;some()方法
//只要有一个为true,结果就为true
var
num
=
[1,2,3,4,5,4,3,2,1];
num.every(function(item,
index,
array){
return
(item
2);
//false
});
num.some(function(item,
index,
array){
return
(item
2);
//true
})
//forEach()
对数组的每一项传入参数,没有返回值
var
num
=
[1,2,3,4,5,4,3,2,1];
num.forEach(function(item,
index,
array){
return
item;
})
希望本文所述对大家的javascript程序设计有所帮助。
javascript有哪些著名实例！？
您好,javascript方面的书的话,比较有名的有:
javascript权威指南
javascript入门经典
javascript高级程序设计(我自己就是用得这本书,很不错,外国人写的)
然后,你还得深入学jquery
以及html,css基础
希望对您有所帮助
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
document.oncontextmenu
=
function(){return
false};
//禁止鼠标右键菜单显示
var
res
=
document.getElementById('box');
//找到id为box的div
document.body.onmouseup
=
function(e){
//在body里点击触发事件
if(e.button===2){
//如果button=1（鼠标左键），button=2（鼠标右键），button=0（鼠标中间键）
console.log(e);
//将传进去的参数打印出来
console.log(e.offsetY);
//打印出鼠标点击的Y轴坐标
console.log(e.offsetX);
//打印出鼠标点击的X轴坐标
res.style.top
=
e.offsetY+'px';
//鼠标点击时给div定位Y轴
res.style.left
=
e.offsetX+'px';
//鼠标点击时给div定位X轴
res.style.display
=
'block';
//显示div盒子
}else{
res.style.display
=
'none';
//否则不显示div盒子
}
}
以上这篇JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
求javascript仿面向对象编程实例代码（简单明了的，呵呵~）
//定义一个javascript类
function JsClass(privateParam/* */,publicParam){//构造函数
var priMember = privateParam; //私有变量
this.pubMember = publicParam; //公共变量
//定义私有方法
function priMethod(){
return "priMethod()";
}
//定义特权方法，特权方法可以访问所有成员
this.privilegedMethod = function(){
var str = "这是特权方法，我调用了\n";
str += " 私有变量：" + priMember +"\n";
str += " 私有方法：" + priMethod() +"\n";
str += " 公共变量：" + this.pubMember +"\n";
str += " 公共方法：" + this.pubMethod();
return str;
}
}
//添加公共方法，不能调用私有变量和方法
JsClass.prototype.pubMethod = function(){
return "pubMethod()";
}
//使用 JsClass的实例
JsObject = new JsClass("priMember","pubMember");
//alert(JsObject.pubMember);//弹出pubMember信息
//alert(JsObject.priMember);//弹出undefined信息
//alert(JsObject.pubMethod());//弹出pubMethod信息
//alert(JsObject.priMethod());//弹出"对象不支持此属性或方法"的错误
alert(JsObject.privilegedMethod());
