javascript實例應用的簡單介紹

本文目錄一覽：

• 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());