40個js實例（js什麼是實例）

本文目錄一覽：

• 1、求JS分頁實例或者servlet分頁實例，最好有例子能直接運行看看效果
• 2、js中的數組應用實例
• 3、JavaScript學習筆記之數組基本操作示例
• 4、JS隱藏號碼中間4位代碼實例
• 5、JS基於面向對象實現的拖拽庫實例
• 6、用JS中split方法實現彩色文字背景效果實例

求JS分頁實例或者servlet分頁實例，最好有例子能直接運行看看效果

!DOCTYPE HTML

html

head

meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /

title分頁JS代碼/title

style type=”text/css”

.page{margin:2em;}

.page a{text-decoration:none;display:inline-block;line-height:14px;padding:2px 5px;color:#333;border:1px solid #ccc;margin:0 2px;}

.page a:hover,.page a.on{background:#999;color:#fff;border:1px solid #333;}

.page a.unclick,.page a.unclick:hover{background:none;border:1px solid #eee;color:#999;cursor:default;}

/style

/head

body

div class=”page”/div

div class=”page”/div

/body

script type=”text/javascript”

//container 容器，count 總頁數 pageindex 當前頁數

function setPage(container, count, pageindex) {

var container = container;

var count = count;

var pageindex = pageindex;

var a = [];

//總頁數少於10 全部顯示,大於10 顯示前3 後3 中間3 其餘….

if (pageindex == 1) {

a[a.length] = “a href=\”#\” class=\”prev unclick\”prev/a”;

} else {

a[a.length] = “a href=\”#\” class=\”prev\”prev/a”;

}

function setPageList() {

if (pageindex == i) {

a[a.length] = “a href=\”#\” class=\”on\”” + i + “/a”;

} else {

a[a.length] = “a href=\”#\”” + i + “/a”;

}

}

//總頁數小於10

if (count = 10) {

for (var i = 1; i = count; i++) {

setPageList();

}

}

//總頁數大於10頁

else {

if (pageindex = 4) {

for (var i = 1; i = 5; i++) {

setPageList();

}

a[a.length] = “…a href=\”#\”” + count + “/a”;

} else if (pageindex = count – 3) {

a[a.length] = “a href=\”#\”1/a…”;

for (var i = count – 4; i = count; i++) {

setPageList();

}

}

else { //當前頁在中間部分

a[a.length] = “a href=\”#\”1/a…”;

for (var i = pageindex – 2; i = pageindex + 2; i++) {

setPageList();

}

a[a.length] = “…a href=\”#\”” + count + “/a”;

}

}

if (pageindex == count) {

a[a.length] = “a href=\”#\” class=\”next unclick\”next/a”;

} else {

a[a.length] = “a href=\”#\” class=\”next\”next/a”;

}

container.innerHTML = a.join(“”);

//事件點擊

var pageClick = function() {

var oAlink = container.getElementsByTagName(“a”);

var inx = pageindex; //初始的頁碼

oAlink[0].onclick = function() { //點擊上一頁

if (inx == 1) {

return false;

}

inx–;

setPage(container, count, inx);

return false;

}

for (var i = 1; i oAlink.length – 1; i++) { //點擊頁碼

oAlink[i].onclick = function() {

inx = parseInt(this.innerHTML);

setPage(container, count, inx);

return false;

}

}

oAlink[oAlink.length – 1].onclick = function() { //點擊下一頁

if (inx == count) {

return false;

}

inx++;

setPage(container, count, inx);

return false;

}

} ()

}

setPage(document.getElementsByTagName(“div”)[0],10,1);

setPage(document.getElementsByTagName(“div”)[1],13,5);

/script

/html

js中的數組應用實例

比如說頁面中有很多input

type=’text’

name=『inp_txt』，

以10個為例吧

你想要操作這些元素時就要把它們全部獲取，不用數組來操作的話就要分別獲取並操作10次。

用數組獲取

var

inp=document.getElementsByName(“inp_txt”),

for(var

i=0;iinp.length;i++){

document.write(inp[i].value)//循環操作每個input

}

這樣就可以一次獲取並操作全部

所以說：

數組的好處是——可以方便的將一大堆數據進行重複操作

JavaScript學習筆記之數組基本操作示例

本文實例講述了JavaScript學習筆記之數組基本操作。分享給大家供大家參考，具體如下：

一、數組定義

1、定義

vara=[1,2,3]

vara=newArray(1,2,3);

2、長度

返回長度

script

vara=[1,2,3,4,5,6];

alert(a.length);

/script

設置長度

script

vara=[1,2,3,4,5,6];

a.length=2;

alert(a);

/script

二、數組連接

script

vara=[1,2,3];

varb=[4,5,6];

alert(a.concat(b));

alert(b.concat(a));

/script

三、數組排序

sort()函數

默認情況是把數組元素按字符串排序

例子

01

script

vararr=[‘float’,’width’,’alpha’,’zoom’,’left’];

arr.sort();

alert(arr);

/script

例子02

vararr=[12,8,99,19,112];

arr.sort();

alert(arr);

例子03

sort()函數的改進

vararr=[12,8,99,19,112];

arr.sort(function(n1,n2){

returnn1-n2;

});

alert(arr);

四、數組連接

1、兩個數組間的連接：contact()

script

vara=[1,2,3];

varb=[4,5,6];

alert(a.concat(b));

alert(b.concat(a));

/script

2、數組元素間的連接：join()

script

vararr=[1,2,3,4];

alert(arr.join(‘–p’));

/script

五、數組元素添加、刪除

1、數組尾部的添加、刪除

尾部添加：push(value)

例子01

script

vara=[1,2,3];

a.push(4);

alert(a);

/script

尾部刪除：pop()

例子02

script

vara=[1,2,3];

a.pop();

alert(a);

/script

2、數組頭部的添加、刪除

頭部添加

unshift(value)

例子01

script

vararr=[1,2,3];

arr.unshift(0)

alert(arr);

/script

頭部刪除:shift()

例子02

script

vararr=[1,2,3];

arr.shift();

alert(arr);

/script

3、數組——splice()

刪除數據

例子01

script

vararr=[1,2,3,4,5,6];

//splice(起點，長度)

arr.splice(2,3);

alert(arr);

/script

插入數據

例子02

script

vararr=[1,2,3,4,5,6];

//插入數據splice（起點，長度，元素）

arr.splice(2,0,’a’,’b’,’c’);

alert(arr);

/script

替換數據

例子02

script

vararr=[1,2,3,4,5,6];

//替換數據

arr.splice(2,2,’a’,’b’);

alert(arr);

/script

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：測試上述代碼運行結果。

更多關於JavaScript相關內容還可查看本站專題：《JavaScript數組操作技巧總結》、《JavaScript字符與字符串操作技巧總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript排序算法總結》、《JavaScript查找算法技巧總結》、《JavaScript數學運算用法總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript錯誤與調試技巧總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章:js數組與字符串的相互轉換方法js刪除數組元素、清空數組的簡單方法(必看)js數組循環遍曆數組內所有元素的方法JS

array

數組詳解js數組去重的三種常用方法總結JavaScript從數組中刪除指定值元素的方法JS數組的遍歷方式for循環與for…in向JavaScript的數組中添加元素的方法小結JS刪除數組裡的某個元素方法javascript

數組的定義和數組的長度Js數組的操作push,pop,shift,unshift等方法詳細介紹

JS隱藏號碼中間4位代碼實例

本文實例為大家分享了JS隱藏號碼中間4位的具體代碼，供大家參考，具體內容如下

function

resetPhone(phone)

{

var

str

=

String(phone)

var

len

=

str.length;

var

prev,next;

if

(len

=

7)

{

prev

=

str.slice(-len,-7)

next

=

str.slice(-3)

str

=

prev+”****”+next

}

else

if

(len

7

len

=

6)

{

prev

=

str.slice(-len,-4)

next

=

str.slice(-2)

str

=

prev

+

“**”

+

next

}

console.log(str)

return

str

}

上面可以正常使用，正則更加方便，但是如果中間連續重複數字有點小問題（如下面的正則方式）。

function

resetPhone(phone)

{

var

str

=

String(phone)

var

len

=

str.length;

if

(len

=

7)

{

var

reg

=

str.slice(-7,

-3)

return

str.replace(reg,

“****”)

}

else

if

(len

7

len

=

6)

{

//1234567

var

reg

=

str.slice(-4,

-2)

return

str.replace(reg,

“**”)

}

}

以上所述是小編給大家介紹的JS隱藏號碼中間4位詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章:JS中實現隱藏部分姓名或者電話號碼的代碼JS中input表單隱藏域及其使用方法JS實現「隱藏與顯示」功能(多種方法)javascript點擊按鈕實現隱藏顯示切換效果AngularJS實現元素顯示和隱藏的幾個案例JS實現鼠標點擊展開或隱藏表格行的方法jquery和js實現對div的隱藏和顯示方法js設置控件的隱藏與顯示的兩種方法js判斷元素是否隱藏的方法javascript獲取隱藏元素(display:none)的高度和寬度的方法

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程序設計有所幫助。

用JS中split方法實現彩色文字背景效果實例

先來看看實現效果圖

效果實現步驟：

1、獲取要用到的元素；

2、聲明一個數組變量（arrColor）存放顏色值；

3、給按鈕添加點擊事件；

4、獲取文本框的value值，並用split方法把文本框的字符串值轉換成數組（arr）存放；

5、循環取出存數組（arr）中的值並添加上span標籤；

6、設置span標籤的背景色：從數組（arrColor）循環取值；

7、把設定好的內容添加到div中；

效果完整代碼：

!doctype

html

html

head

meta

charset=”utf-8″

title利用JS中split方法實現彩色文字背景效果實例/title

style

div

{

width:300px;

height:200px;

border:1px

solid

#333;

background:#fff;

padding:20px;

line-height:40px;

}

span

{

padding:5px

15px;

font-family:微軟雅黑;

}

/style

script

window.onload

=

function(){

var

oDiv=document.getElementById(‘div1’);

var

aInp=document.getElementsByTagName(‘input’);

var

arrColor

=

[‘#f00′,’#ff0′,’#f0f’,’#0ff’];

aInp[1].onclick=function(){

var

str

=

aInp[0].value;

var

arr

=

str.split(”);

for(var

i=0;

iarr.length;

i++

){

arr[i]=’span

style=”background:’+arrColor[i%arrColor.length]+'”‘+arr[i]+’/span’;

}

oDiv.innerHTML

+=

arr.join(”);

}

}

/script

/head

body

div

id=”div1″

/div

input

type=”text”

/

input

type=”button”

value=”按鈕”

/

/body

/html

總結

用JS中split方法實現彩色文字背景效果實例到這就結束了，感興趣的朋友們可以自己動手操作看看，希望對大家的學習工作能有所幫助。