本文目录一览：
- 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方法实现彩色文字背景效果实例到这就结束了，感兴趣的朋友们可以自己动手操作看看，希望对大家的学习工作能有所帮助。
