当前位置：首页 > 资讯 > 技术文档

JavaScript经典效果集锦

时间：2021-01-12 03:22 编辑：来源：阅读：
扫一扫，手机访问

摘要：JavaScript经典效果集锦

一实用且必用的小脚本代码二鼠标旁边的提示信息,类似与163登录后的页面提示效果三如果文字过长,则将过长的部分变成省略号显示四滚动的图片五接收键盘指令的脚本六让你的文本链接渐隐渐显七类似与QQ的好友/黑名单之类的树型菜单-----推荐八很多的脚本翻页------推荐九 DIV的透明层实现十 JSP页面自动生成html页面/或任何格式页面-----推荐十一超级强大的表单验证-----推荐十二漂亮的脚本日历十三进入,退出页面的各种效果! 十四很酷的效果,表格被选中回变颜色十五弹出提示的效果十六图片之间的切换十七 DIV_圆边圆角的实现十八跳动的菜单十九通过页面抓取照片二十客户端静态页面玩分页二十一类似与google个性页面的好东东------网友155120 二十二漂亮的表格二十三经典的带阴影的可拖动的浮动层------网友marvellous--------推荐二十四运行代码的代码------网友:Lenvo 二十五凹陷文字------------网友:Lenvo 二十六漂亮的仿flash菜单---网友:Lenvo 二十七自定义容器和字体大小---网友:greengnn 二十八超级REAL视频播放器---网友:leaf52 二十九网站论坛上面快捷键提交表单的方法---网友:greengnn 三十 accesskey 提交---网友:greengnn 三十一新闻广告图片切换效果+描述---网友:greengnn 三十二菜单特效---网友:greengnn 三十三采用CSS和JS的下拉菜单---网友:greengnn [b]一实用且必用的小脚本代码:[/b] 脚本1：进入主页以后自动播放声音 <embed src="pnm://10.13.31.90/~kayvin/mihunji.rm" hidden=true autostart=true loop=true> 脚本2：进入主页后自动最大话,省的去在自己单击了 <script> self.moveTo(0,0) self.resizeTo(screen.availWidth,screen.availHeight) </script> 脚本3：显示现在时间的脚本 <script language=vbscript>document.write now</script> 脚本4：显示最后修改时间的脚本 <script>document.write(document.lastModified)</script> 脚本5：设为首页,加为收藏，加入频道,启动outlook发信 <a style="cursor:hand"　 onclick="this.style.behavior="url(#default#homepage)"; this.setHomePage(http://10.13.31.90/~kayvin/);">">设为首页</a> <a style="cursor:hand" onclick="window.external.AddFavorite(location.href,document.title);">加入收藏</a> <a href=javascript:window.external.addChannel("typhoon.cdf")>加入频道</a> <a href="mailto:kayvin@sohu.com">与我联系</a> 脚本6：状态栏动态显示现在时间 <script> function see(){ window.setTimeout("see()",1000); today = new Date(); self.status = today.toString(); } </script> <body onload=see()> 脚本7：关闭窗口的脚本 <a href=javascript:close()>[关闭窗口]</a> 脚本8：按下F12键,直接返回首页 <script>function look(){ if(event.keyCode==123){document.location.href=http://10.13.31.90/~kayvin/} } if(document.onkeydown==null) {document.onkeydown=look} </script> 脚本9：后退,刷新,前进 <input type=button value=后退 onclick=history.go(-1)> <input type=button value=刷新 onclick=history.go(-0)> <input type=button value=前进 onclick=history.go(+1)> 脚本10：设定时间弹出窗口,4000=4秒,当然你可以自定义 <script>function l() { window.open(" 10.13.31.90/~kayvin/ ","name","width=500,height=150,border=0") } setTimeout("l()",4000) </script> [b]二鼠标旁边的提示信息,类似与163登录后的页面提示效果：[/b] 代码拷贝框

<a href="#" title="这是提示">tip</a> 
<script Language="JavaScript"> 
//***********默认设置定义.********************* 
tPopWait=50;//停留tWait豪秒后显示提示。 
tPopShow=5000;//显示tShow豪秒后关闭提示 
showPopStep=20; 
popOpacity=99; 
//***************内部变量定义***************** 
sPop=null; 
curShow=null; 
tFadeOut=null; 
tFadeIn=null; 
tFadeWaiting=null; 
document.write("<style type='text/css'id='defaultPopStyle'>"); 
document.write(".cPopText { background-color: #F8F8F5;color:#000000; border: 1px #000000 solid;font-color: font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}"); 
document.write("</style>"); 
document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>"); 

function showPopupText(){ 
var o=event.srcElement; 
MouseX=event.x; 
MouseY=event.y; 
if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""}; 
if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""}; 
if(o.dypop!=sPop) { 
sPop=o.dypop; 
clearTimeout(curShow); 
clearTimeout(tFadeOut); 
clearTimeout(tFadeIn); 
clearTimeout(tFadeWaiting); 
if(sPop==null || sPop=="") { 
dypopLayer.innerHTML=""; 
dypopLayer.style.filter="Alpha()"; 
dypopLayer.filters.Alpha.opacity=0; 
} 
else { 
if(o.dyclass!=null) popStyle=o.dyclass 
else popStyle="cPopText"; 
curShow=setTimeout("showIt()",tPopWait); 
} 
} 
} 
function showIt(){ 
dypopLayer.className=popStyle; 
dypopLayer.innerHTML=sPop; 
popWidth=dypopLayer.clientWidth; 
popHeight=dypopLayer.clientHeight; 
if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24 
else popLeftAdjust=0; 
if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24 
else popTopAdjust=0; 
dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust; 
dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust; 
dypopLayer.style.filter="Alpha(Opacity=0)"; 
fadeOut(); 
} 
function fadeOut(){ 
if(dypopLayer.filters.Alpha.opacity<popOpacity) { 
dypopLayer.filters.Alpha.opacity+=showPopStep; 
tFadeOut=setTimeout("fadeOut()",1); 
} 
else { 
dypopLayer.filters.Alpha.opacity=popOpacity; 
tFadeWaiting=setTimeout("fadeIn()",tPopShow); 
} 
} 
function fadeIn(){ 
if(dypopLayer.filters.Alpha.opacity>0) { 
dypopLayer.filters.Alpha.opacity-=1; 
tFadeIn=setTimeout("fadeIn()",1); 
} 
} 
document.onmouseover=showPopupText; 
</script>

[b]三如果文字过长,则将过长的部分变成省略号显示：[/b] 运行代码框

<DIV STYLE="width: 120px; height: 50px; border: 1px solid blue; 
overflow: hidden; text-overflow:ellipsis"> 
<NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR> 
</DIV>

[b]四滚动的图片[/b] 运行代码框

<script language="javascript"> 
imgArr=new Array() 
imgArr[0]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>" 
imgArr[1]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>" 
imgArr[2]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>" 
imgArr[3]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>" 
imgArr[4]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>" 

var moveStep=4 //步长，单位：pixel 
var moveRelax=100 //移动时间间隔，单位：ms 

ns4=(document.layers)?true:false 

var displayImgAmount=4 //视区窗口可显示个数 
var divWidth=220 //每块图片占位宽 
var divHeight=145 //每块图片占位高 

var startDnum=0 
var nextDnum=startDnum+displayImgAmount 
var timeID 
var outHover=false 

var startDivClipLeft 
var nextDivClipRight 

function initDivPlace(){ 
if (ns4){ 
for (i=0;i<displayImgAmount;i++){ 
eval("document.divOuter.document.divAds"+i+".left="+divWidth*i) 
} 
for (i=displayImgAmount;i<imgArr.length;i++){ 
eval("document.divOuter.document.divAds"+i+".left="+divWidth*displayImgAmount) 
} 
}else{ 
for (i=0;i<displayImgAmount;i++){ 
eval("document.all.divAds"+i+".style.left="+divWidth*i) 
} 
for (i=displayImgAmount;i<imgArr.length;i++){ 
eval("document.all.divAds"+i+".style.left="+divWidth*displayImgAmount) 
} 
} 
} 

function mvStart(){ 
timeID=setTimeout(moveLeftDiv,moveRelax) 
} 

function mvStop(){ 
clearTimeout(timeID) 
} 

function moveLeftDiv(){ 
if (ns4){ 
for (i=0;i<=displayImgAmount;i++){ 
eval("document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left=document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left-moveStep") 
} 

startDivClipLeft=parseInt(eval("document.divOuter.document.divAds"+startDnum+".clip.left")) 
nextDivClipRight=parseInt(eval("document.divOuter.document.divAds"+nextDnum+".clip.right")) 

if (startDivClipLeft+moveStep>divWidth){ 
eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+divWidth) 

eval("document.divOuter.document.divAds"+startDnum+".left="+divWidth*displayImgAmount) 
eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".left=document.divOuter.document.divAds"+nextDnum+".left+"+divWidth) 
eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".clip.left=0") 


startDnum=(++startDnum)%imgArr.length 
nextDnum=(startDnum+displayImgAmount)%imgArr.length 

startDivClipLeft=moveStep-(divWidth-startDivClipLeft) 
nextDivClipRight=moveStep-(divWidth-nextDivClipRight) 
}else{ 
eval("document.divOuter.document.divAds"+nextDnum+".clip.left=0") 
startDivClipLeft+=moveStep 
nextDivClipRight+=moveStep 
} 
eval("document.divOuter.document.divAds"+startDnum+".clip.left="+startDivClipLeft) 
eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+nextDivClipRight) 
}else{ 
for (i=0;i<=displayImgAmount;i++){ 
eval("document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.left=document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.pixelLeft-moveStep") 
} 

startDivClipLeft=parseInt(eval("document.all.divAds"+startDnum+".currentStyle.clipLeft")) 
nextDivClipRight=parseInt(eval("document.all.divAds"+nextDnum+".currentStyle.clipRight")) 

if (startDivClipLeft+moveStep>divWidth){ 
eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+divWidth+","+divHeight+",0"+")'") 

eval("document.all.divAds"+startDnum+".style.left="+divWidth*displayImgAmount) 
eval("document.all.divAds"+parseInt((nextDnum+1)%imgArr.length)+".style.left=document.all.divAds"+nextDnum+".style.pixelLeft+"+divWidth) 

startDnum=(++startDnum)%imgArr.length 
nextDnum=(startDnum+displayImgAmount)%imgArr.length 

startDivClipLeft=moveStep-(divWidth-startDivClipLeft) 
nextDivClipRight=moveStep-(divWidth-nextDivClipRight) 
}else{ 
startDivClipLeft+=moveStep 
nextDivClipRight+=moveStep 
} 
eval("document.all.divAds"+startDnum+".style.clip='rect(0,"+divWidth+","+divHeight+","+startDivClipLeft+")'") 
eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+nextDivClipRight+","+divHeight+",0)'") 
} 

if (outHover){ 
mvStop() 
}else{ 
mvStart() 
} 


} 

function writeDivs(){ 
if (ns4){ 
document.write("<ilayer name=divOuter width=750 height="+divHeight+">") 

for (i=0;i<imgArr.length;i++){ 
document.write("<layer name=divAds"+i+">") 
document.write(imgArr[i]+" ") 
document.write("</layer>") 
} 
document.write("</ilayer>") 
document.close() 
for (i=displayImgAmount;i<imgArr.length;i++){ 
eval("document.divOuter.document.divAds"+i+".clip.right=0") 
} 
}else{ 
document.write("<div id=divOuter style='position:relative' width=750 height="+divHeight+">") 

for (i=0;i<imgArr.length;i++){ 
document.write("<div id=divAds"+i+" style='position:absolute;clip:rect(0,"+divWidth+","+divHeight+",0)'>") 
document.write(imgArr[i]+" ") 
document.write("</div>") 
} 
document.write("</div>") 
for (i=displayImgAmount;i<imgArr.length;i++){ 
eval("document.all.divAds"+i+".style.clip='rect(0,0,"+divHeight+",0)'") 
} 
} 
} 
</script> 
<BODY onload=javascript:mvStart()> 
<SCRIPT language=javascript>writeDivs();initDivPlace();</SCRIPT>

[b]五接收键盘指令的脚本:[/b] 代码拷贝框

<SCRIPT language="JavaScript"> 
<!-- 
var hotkey=97 
var destination="http://www.wyev.com" 
if (document.layers) 
document.captureEvents(Event.KEYPRESS) 
function backhome(e){ 
if (document.layers){ 
if (e.which==hotkey) 
window.location=destination 
} 
else if (document.all){ 
if (event.keyCode==hotkey) 
window.location=destination 
} 
} 
document.onkeypress=backhome 
//--> 
</SCRIPT> 


onkeydown="javascript:onenter();" 

function onenter(){ 
if(event.keyCode==13){ 
alert("回车"); 
} 
}

[b]六让你的文本链接渐隐渐显:[/b] 运行代码框

<META NAME="Description" CONTENT=""> 
</HEAD> 

<BODY> 
<script language="javascript" type="text/javascript"> 


startColor = "#671700"; // 定义链接颜色 
endColor = "#D8D1C5"; // 定义要渐变到最后的颜色 

stepIn = 17; 
stepOut = 23; 

/* 
定义是否让所有的文本链接自动渐变，true为是，false为否 
*/ 
autoFade = true; 

/* 
在这里定义css样式里的类class：fade，如果为true，那么你要将要渐变的链接上加上此fade样式 
*/ 
sloppyClass = false; 

hexa = new makearray(16); 
for(var i = 0; i < 10; i++) 
hexa[i] = i; 
hexa[10]="a"; hexa[11]="b"; hexa[12]="c"; 
hexa[13]="d"; hexa[14]="e"; hexa[15]="f"; 

document.onmouseover = domouseover; 
document.onmouseout = domouseout; 

startColor = dehexize(startColor.toLowerCase()); 
endColor = dehexize(endColor.toLowerCase()); 

var fadeId = new Array(); 

function dehexize(Color){ 
var colorArr = new makearray(3); 
for (i=1; i<7; i++){ 
for (j=0; j<16; j++){ 
if (Color.charAt(i) == hexa[j]){ 
if (i%2 !=0) 
colorArr[Math.floor((i-1)/2)]=eval(j)*16; 
else 
colorArr[Math.floor((i-1)/2)]+=eval(j); 
} 
} 
} 
return colorArr; 
} 

function domouseover() { 
if(document.all){ 
var srcElement = event.srcElement; 
if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) 
fade(startColor,endColor,srcElement.uniqueID,stepIn); 
} 
} 

function domouseout() { 
if (document.all){ 
var srcElement = event.srcElement; 
if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) 
fade(endColor,startColor,srcElement.uniqueID,stepOut); 
} 
} 

function makearray(n) { 
this.length = n; 
for(var i = 1; i <= n; i++) 
this[i] = 0; 
return this; 
} 

function hex(i) { 
if (i < 0) 
return "00"; 
else if (i > 255) 
return "ff"; 
else 
return "" + hexa[Math.floor(i/16)] + hexa[i];} 

function setColor(r, g, b, element) { 
var hr = hex(r); var hg = hex(g); var hb = hex(b); 
element.style.color = "#"+hr+hg+hb; 
} 

function fade(s,e, element,step){ 
var sr = s[0]; var sg = s[1]; var sb = s[2]; 
var er = e[0]; var eg = e[1]; var eb = e[2]; 

if (fadeId[0] != null && fade[0] != element){ 
setColor(sr,sg,sb,eval(fadeId[0])); 
var i = 1; 
while(i < fadeId.length){ 
clearTimeout(fadeId[i]); 
i++; 
} 
} 

for(var i = 0; i <= step; i++) { 
fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" + 
step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+ 
")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step); 
} 
fadeId[0] = element; 
} 

</script> 

</BODY> 
</HTML> 
<A HREF="">让你的文本链接渐隐渐显</A>

[b]七类似与QQ的好友/黑名单之类的树型菜单_极品:[/b] 运行代码框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
</HEAD> 

<BODY> 
<script> 
if (!document.getElementById) 
document.getElementById = function() { return null; } 

function initializeMenu(menuId, actuatorId) { 
var menu = document.getElementById(menuId); 
var actuator = document.getElementById(actuatorId); 

if (menu == null || actuator == null) return; 

//if (window.opera) return; // I'm too tired 

actuator.parentNode.style.backgroundImage = "url(/images/plus.gif)"; 
actuator.onclick = function() { 
var display = menu.style.display; 
this.parentNode.style.backgroundImage = 
(display == "block") ? "url(/images/plus.gif)" : "url(/images/minus.gif)"; 
menu.style.display = (display == "block") ? "none" : "block"; 

return false; 
} 
} 
window.onload = function() { 
initializeMenu("productsMenu", "productsActuator"); 
initializeMenu("newPhonesMenu", "newPhonesActuator"); 
initializeMenu("compareMenu", "compareActuator"); 
} 
</script> 
<style> 
body { 
font-family: verdana, helvetica, arial, sans-serif; 
} 

#mainMenu { 
background-color: #EEE; 
border: 1px solid #CCC; 
color: #000; 
width: 203px; 
} 

#menuList { 
margin: 0px; 
padding: 10px 0px 10px 15px; 
} 

li.menubar { 
background: url(/images/plus.gif) no-repeat 0em 0.3em; 
font-size: 12px; 
line-height: 1.5em; 
list-style: none outside; 
} 

.menu, .submenu { 
display: none; 
margin-left: 15px; 
padding: 0px; 
} 

.menu li, .submenu li { 
background: url(/images/square.gif) no-repeat 0em 0.3em; 
list-style: none outside; 
} 

a.actuator { 
background-color: transparent; 
color: #000; 
font-size: 12px; 
padding-left: 15px; 
text-decoration: none; 
} 

a.actuator:hover { 
text-decoration: underline; 
} 

.menu li a, .submenu li a { 
background-color: transparent; 
color: #000; 
font-size: 12px; 
padding-left: 15px; 
text-decoration: none; 
} 

.menu li a:hover, submenu li a:hover { 
/*border-bottom: 1px dashed #000;*/ 
text-decoration: underline; 
} 

span.key { 
text-decoration: underline; 
} 
</style> 
</head> 
<body> 
<div id="mainMenu"> 
<ul id="menuList"> 
<li class="menubar"> 
<a href="#" id="productsActuator" class="actuator">图秀地带收藏夹</a> 
<ul id="productsMenu" class="menu"> 
<li> 
<a href="#" id="newPhonesActuator" class="actuator">我的好友</a> 
<ul id="newPhonesMenu" class="submenu"> 
<li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">张三[10000001]</a></li> 
<li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li> 
<li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">张三[10000001]</a></li> 
<li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li> 
</ul> 
</li> 
<li> 
<a href="#" id="compareActuator" class="actuator">陌生人</a> 
<ul id="compareMenu" class="submenu"> 
<li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">张三[10000001]</a></li> 
<li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li> 
<li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">张三[10000001]</a></li> 
<li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li> 
</ul> 
</li> 
</ul> 
</li> 
</ul> 
</div> 
</body> 
</BODY> 
</HTML>

[b]八很多的脚本翻页:[/b] 运行代码框

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> JavaScript: showPages v1.0 [by Lapuasi.com]</title> 
<script language="JavaScript"> 
<!-- 
/* 

showPages v1.1 
================================= 

Infomation 
---------------------- 
Author : Lapuasi 
E-Mail : lapuasi@gmail.com 
Web : http://www.lapuasi.com 
Date : 2005-11-17 


Example 
---------------------- 
var pg = new showPages('pg'); 
pg.pageCount = 12; //定义总页数(必要) 
pg.argName = 'p'; //定义参数名(可选,缺省为page) 
pg.printHtml(); //显示页数 


Supported in Internet Explorer, Mozilla Firefox 
*/ 

function showPages(name) { //初始化属性 
this.name = name; //对象名称 
this.page = 1; //当前页数 
this.pageCount = 1; //总页数 
this.argName = 'page'; //参数名 
this.showTimes = 1; //打印次数 
} 

showPages.prototype.getPage = function(){ //丛url获得当前页数,如果变量重复只获取最后一个 
var args = location.search; 
var reg = new RegExp('[\?&]?' + this.argName + '=([^&]*)[&$]?', 'gi'); 
var chk = args.match(reg); 
this.page = RegExp.$1; 
} 
showPages.prototype.checkPages = function(){ //进行当前页数和总页数的验证 
if (isNaN(parseInt(this.page))) this.page = 1; 
if (isNaN(parseInt(this.pageCount))) this.pageCount = 1; 
if (this.page < 1) this.page = 1; 
if (this.pageCount < 1) this.pageCount = 1; 
if (this.page > this.pageCount) this.page = this.pageCount; 
this.page = parseInt(this.page); 
this.pageCount = parseInt(this.pageCount); 
} 
showPages.prototype.createHtml = function(mode){ //生成html代码 
var strHtml = '', prevPage = this.page - 1, nextPage = this.page + 1; 
if (mode == '' || typeof(mode) == 'undefined') mode = 0; 
switch (mode) { 
case 0 : //模式1 (页数,首页,前页,后页,尾页) 
strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>'; 
strHtml += '<span class="number">'; 
if (prevPage < 1) { 
strHtml += '<span title="First Page">«</span>'; 
strHtml += '<span title="Prev Page">‹</span>'; 
} else { 
strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">«</a></span>'; 
strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">‹</a></span>'; 
} 
for (var i = 1; i <= this.pageCount; i++) { 
if (i > 0) { 
if (i == this.page) { 
strHtml += '<span title="Page ' + i + '">[' + i + ']</span>'; 
} else { 
strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>'; 
} 
} 
} 
if (nextPage > this.pageCount) { 
strHtml += '<span title="Next Page">›</span>'; 
strHtml += '<span title="Last Page">»</span>'; 
} else { 
strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">›</a></span>'; 
strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">»</a></span>'; 
} 
strHtml += '</span><br />'; 
break; 
case 1 : //模式1 (10页缩略,首页,前页,后页,尾页) 
strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>'; 
strHtml += '<span class="number">'; 
if (prevPage < 1) { 
strHtml += '<span title="First Page">«</span>'; 
strHtml += '<span title="Prev Page">‹</span>'; 
} else { 
strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">«</a></span>'; 
strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">‹</a></span>'; 
} 
if (this.page % 10 ==0) { 
var startPage = this.page - 9; 
} else { 
var startPage = this.page - this.page % 10 + 1; 
} 
if (startPage > 10) strHtml += '<span title="Prev 10 Pages"><a href="javascript:' + this.name + '.toPage(' + (startPage - 1) + ');">...</a></span>'; 
for (var i = startPage; i < startPage + 10; i++) { 
if (i > this.pageCount) break; 
if (i == this.page) { 
strHtml += '<span title="Page ' + i + '">[' + i + ']</span>'; 
} else { 
strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>'; 
} 
} 
if (this.pageCount >= startPage + 10) strHtml += '<span title="Next 10 Pages"><a href="javascript:' + this.name + '.toPage(' + (startPage + 10) + ');">...</a></span>'; 
if (nextPage > this.pageCount) { 
strHtml += '<span title="Next Page">›</span>'; 
strHtml += '<span title="Last Page">»</span>'; 
} else { 
strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">›</a></span>'; 
strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">»</a></span>'; 
} 
strHtml += '</span><br />'; 
break; 
case 2 : //模式2 (前后缩略,页数,首页,前页,后页,尾页) 
strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>'; 
strHtml += '<span class="number">'; 
if (prevPage < 1) { 
strHtml += '<span title="First Page">«</span>'; 
strHtml += '<span title="Prev Page">‹</span>'; 
} else { 
strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">«</a></span>'; 
strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">‹</a></span>'; 
} 
if (this.page != 1) strHtml += '<span title="Page 1"><a href="javascript:' + this.name + '.toPage(1);">[1]</a></span>'; 
if (this.page >= 5) strHtml += '<span>...</span>'; 
if (this.pageCount > this.page + 2) { 
var endPage = this.page + 2; 
} else { 
var endPage = this.pageCount; 
} 
for (var i = this.page - 2; i <= endPage; i++) { 
if (i > 0) { 
if (i == this.page) { 
strHtml += '<span title="Page ' + i + '">[' + i + ']</span>'; 
} else { 
if (i != 1 && i != this.pageCount) { 
strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>'; 
} 
} 
} 
} 
if (this.page + 3 < this.pageCount) strHtml += '<span>...</span>'; 
if (this.page != this.pageCount) strHtml += '<span title="Page ' + this.pageCount + '"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">[' + this.pageCount + ']</a></span>'; 
if (nextPage > this.pageCount) { 
strHtml += '<span title="Next Page">›</span>'; 
strHtml += '<span title="Last Page">»</span>'; 
} else { 
strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">›</a></span>'; 
strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">»</a></span>'; 
} 
strHtml += '</span><br />'; 
break; 
case 3 : //模式3 (箭头样式,首页,前页,后页,尾页) (only IE) 
strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>'; 
strHtml += '<span class="arrow">'; 
if (prevPage < 1) { 
strHtml += '<span title="First Page">9</span>'; 
strHtml += '<span title="Prev Page">7</span>'; 
} else { 
strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">9</a></span>'; 
strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">7</a></span>'; 
} 
if (nextPage > this.pageCount) { 
strHtml += '<span title="Next Page">8</span>'; 
strHtml += '<span title="Last Page">:</span>'; 
} else { 
strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">8</a></span>'; 
strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">:</a></span>'; 
} 
strHtml += '</span><br />'; 
break; 
case 4 : //模式4 (下拉框) 
if (this.pageCount < 1) { 
strHtml += '<select name="toPage" disabled>'; 
strHtml += '<option value="0">No Pages</option>'; 
} else { 
var chkSelect; 
strHtml += '<select name="toPage" onchange="' + this.name + '.toPage(this);">'; 
for (var i = 1; i <= this.pageCount; i++) { 
if (this.page == i) chkSelect=' selected="selected"'; 
else chkSelect=''; 
strHtml += '<option value="' + i + '"' + chkSelect + '>Pages: ' + i + ' / ' + this.pageCount + '</option>'; 
} 
} 
strHtml += '</select>'; 
break; 
case 5 : //模式5 (输入框) 
strHtml += '<span class="input">'; 
if (this.pageCount < 1) { 
strHtml += '<input type="text" name="toPage" value="No Pages" class="itext" disabled="disabled">'; 
strHtml += '<input type="button" name="go" value="GO" class="ibutton" disabled="disabled"></option>'; 
} else { 
strHtml += '<input type="text" value="Input Page:" class="ititle" readonly="readonly">'; 
strHtml += '<input type="text" id="pageInput' + this.showTimes + '" value="' + this.page + '" class="itext" title="Input page" onkeypress="return ' + this.name + '.formatInputPage(event);" onfocus="this.select()">'; 
strHtml += '<input type="text" value=" / ' + this.pageCount + '" class="icount" readonly="readonly">'; 
strHtml += '<input type="button" name="go" value="GO" class="ibutton" onclick="' + this.name + '.toPage(document.getElementById(\'pageInput' + this.showTimes + '\').value);"></option>'; 
} 
strHtml += '</span>'; 
break; 
default : 
strHtml = 'Javascript showPage Error: not find mode ' + mode; 
break; 
} 
return strHtml; 
} 
showPages.prototype.createUrl = function (page) { //生成页面跳转url 
if (isNaN(parseInt(page))) page = 1; 
if (page < 1) page = 1; 
if (page > this.pageCount) page = this.pageCount; 
var url = location.protocol + '//' + location.host + location.pathname; 
var args = location.search; 
var reg = new RegExp('([\?&]?)' + this.argName + '=[^&]*[&$]?', 'gi'); 
args = args.replace(reg,'$1'); 
if (args == '' || args == null) { 
args += '?' + this.argName + '=' + page; 
} else if (args.substr(args.length - 1,1) == '?' || args.substr(args.length - 1,1) == '&') { 
args += this.argName + '=' + page; 
} else { 
args += '&' + this.argName + '=' + page; 
} 
return url + args; 
} 
showPages.prototype.toPage = function(page){ //页面跳转 
var turnTo = 1; 
if (typeof(page) == 'object') { 
turnTo = page.options[page.selectedIndex].value; 
} else { 
turnTo = page; 
} 
self.location.href = this.createUrl(turnTo); 
} 
showPages.prototype.printHtml = function(mode){ //显示html代码 
this.getPage(); 
this.checkPages(); 
this.showTimes += 1; 
document.write('<div id="pages_' + this.name + '_' + this.showTimes + '" class="pages"></div>'); 
document.getElementById('pages_' + this.name + '_' + this.showTimes).innerHTML = this.createHtml(mode); 

} 
showPages.prototype.formatInputPage = function(e){ //限定输入页数格式 
var ie = navigator.appName=="Microsoft Internet Explorer"?true:false; 
if(!ie) var key = e.which; 
else var key = event.keyCode; 
if (key == 8 || key == 46 || (key >= 48 && key <= 57)) return true; 
return false; 
} 
//--> 
</script> 
<style> 
/* Pages Main Tyle */ 
.pages { 
color: #000000; 
cursor: default; 
font-size: 10px; 
font-family: Tahoma, Verdana; 
padding: 3px 0px 3px 0px; 
} 
.pages .count, .pages .number, .pages .arrow { 
color: #000000; 
font-size: 10px; 
background-color: #F7F7F7; 
border: 1px solid #CCCCCC; 
} 
/* Page and PageCount Style */ 
.pages .count { 
font-weight: bold; 
border-right: none; 
padding: 2px 10px 1px 10px; 
} 
/* Mode 0,1,2 Style (Number) */ 
.pages .number { 
font-weight: normal; 
padding: 2px 10px 1px 10px; 
} 
.pages .number a, .pages .number span { 
font-size: 10px; 
} 
.pages .number span { 
color: #999999; 
margin: 0px 3px 0px 3px; 
} 
.pages .number a { 
color: #000000; 
text-decoration: none; 
} 
.pages .number a:hover { 
color: #0000ff; 
} 
/* Mode 3 Style (Arrow) */ 
.pages .arrow { 
font-weight: normal; 
padding: 0px 5px 0px 5px; 
} 
.pages .arrow a, .pages .arrow span { 
font-size: 10px; 
font-family: Webdings; 
} 
.pages .arrow span { 
color: #999999; 
margin: 0px 5px 0px 5px; 
} 
.pages .arrow a { 
color: #000000; 
text-decoration: none; 
} 
.pages .arrow a:hover { 
color: #0000ff; 
} 
/* Mode 4 Style (Select) */ 
.pages select, .pages input { 
color: #000000; 
font-size: 10px; 
font-family: Tahoma, Verdana; 
} 
/* Mode 5 Style (Input) */ 
.pages .input input.ititle, .pages .input input.itext, .pages .input input.icount { 
color: #666666; 
font-weight: bold; 
background-color: #F7F7F7; 
border: 1px solid #CCCCCC; 
} 
.pages .input input.ititle { 
width: 70px; 
text-align: right; 
border-right: none; 
} 
.pages .input input.itext { 
width: 25px; 
color: #000000; 
text-align: right; 
border-left: none; 
border-right: none; 
} 
.pages .input input.icount { 
width: 35px; 
text-align: left; 
border-left: none; 
} 
.pages .input input.ibutton { 
height: 17px; 
color: #FFFFFF; 
font-weight: bold; 
font-family: Verdana; 
background-color: #999999; 
border: 1px solid #666666; 
padding: 0px 0px 2px 1px; 
margin-left: 2px; 
cursor: hand; 
} 

/* body */ 
body { 
font-size: 12px; 
} 
</style> 
</head> 

<body> 
<script language="JavaScript"> 
<!-- 
var pg = new showPages('pg'); 
pg.pageCount =12; // 定义总页数(必要) 
//pg.argName = 'p'; // 定义参数名(可选,默认为page) 

document.write('<br>Show Times: ' + pg.showTimes + ', Mood Default'); 
pg.printHtml(); 
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 0'); 
pg.printHtml(0); 
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 1'); 
pg.printHtml(1); 
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 2'); 
pg.printHtml(2); 
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 3 (only IE)'); 
pg.printHtml(3); 
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 4'); 
pg.printHtml(4); 
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 5'); 
pg.printHtml(5); 
//--> 
</script> 
</body> 
</html>

[b]九 DIV的透明层实现:[/b] 运行代码框

<body bgcolor="#ff0ddd"> 
<div id="Layer1" style="position:absolute; width:260px; height:115px; z-index:1; left: 50px; top: 77px; filter:Alpha(opacity=30)"> 
<table width="96%" border="1" cellpadding="1" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#999999"> 
<tr> 

<td height="25" bgcolor="#f5f5f5" class="13">你也可以在这里插入图片</td> 
</tr> 
<tr> 

<td height="20" bgcolor="#f5f5f5" class="12">你想注册地图名片吗</td> 
</tr> 
<tr> 

<td height="20" bgcolor="#f5f5f5" class="12">http://mc.mapabc.com</td> 
</tr> 
<tr> 

<td height="20" bgcolor="#f5f5f5" class="12">EMAIL:lipeng@mapabc.com</td> 
</tr> 
<tr> 

<td height="20" bgcolor="#f5f5f5" class="12">地址</td> 
</tr> 
<tr> 

<td height="20" bgcolor="#f5f5f5" class="12">邮编</td> 
</tr> 
</table> 
</div>

[b]十 JSP页面自动生成html页面/或任何格式页面:[/b] 先建立一个模本页面:template.htm

代码拷贝框 <html> <head> <title>###title###</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <LINK href="../css.css" rel=stylesheet type=text/css> </head> <body> <table width="500" border="0" align="center" cellpadding="0" cellspacing="2"> <tr> <td align="center">###title###</td> </tr> <tr> <td align="center">作者：###author### </td> </tr> <tr> <td>###content### </td> </tr> </table> </body> </html> 再写一个JSP页面: buildhtml.jsp: 代码拷贝框 <%@ page contentType="text/html; charset=gb2312" import="java.util.*,java.io.*"%> <% try{ String title="李鹏的jsp生成静态html文件"; String content="小样，还搞不定你？"; String editer="hpsoft"; String filePath = ""; filePath = request.getRealPath("/")+"template.htm"; out.print(filePath); String templateContent=""; FileInputStream fileinputstream = new FileInputStream(filePath);//读取模块文件 int lenght = fileinputstream.available(); byte bytes[] = new byte[lenght]; fileinputstream.read(bytes); fileinputstream.close(); templateContent = new String(bytes); out.print(templateContent); templateContent=templateContent.replaceAll("###title###",title); templateContent=templateContent.replaceAll("###content###",content); templateContent=templateContent.replaceAll("###author###",editer);//替换掉模块中相应的地方 out.print(templateContent); // 根据时间得文件名 Calendar calendar = Calendar.getInstance(); String fileame = String.valueOf(calendar.getTimeInMillis()) +".html"; fileame = request.getRealPath("/")+fileame;//生成的html文件保存路径 FileOutputStream fileoutputstream = new FileOutputStream(fileame);//建立文件输出流 out.print("文件输出路径:<br>"); out.print(fileame); byte tag_bytes[] = templateContent.getBytes(); fileoutputstream.write(tag_bytes); fileoutputstream.close(); } catch(Exception e){ out.print(e.toString()); } %> [Ctrl+A 全部选择然后拷贝] [b]十一超级强大的表单验证：[/b] 运行代码框 <title>表单验证类 Validator v1.01</title> <style> body,td{font:normal 12px Verdana;color:#333333} input,textarea,select,td{font:normal 12px Verdana;color:#333333;border:1px solid #999999;background:#ffffff} table{border-collapse:collapse;} td{padding:3px} input{height:20;} textarea{width:80%;height:50px;overfmin:auto;} form{display:inline} </style> <table align="center"> <form name="theForm" id="demo" action="" method="get" onSubmit="return Validator.Validate(this,2)"> <tr> <td>真实姓名：</td><td><input name="Name" dataType="Chinese" msg="真实姓名只允许中文"></td> </tr> <tr> <td>英文名：</td><td><input name="Nick" dataType="English" require="false" msg="英文名只允许英文字母"></td> </tr> <tr> <td>主页：</td><td><input name="Homepage" require="false" dataType="Url" msg="非法的Url"></td> </tr> <tr> <td>密码：</td><td><input name="Password" dataType="SafeString" msg="密码不符合安全规则" type="password"></td> </tr> <tr> <td>重复：</td><td><input name="Repeat" dataType="Repeat" to="Password" msg="两次输入的密码不一致" type="password"></td> </tr> <tr> <td>信箱：</td><td><input name="Email" dataType="Email" msg="信箱格式不正确"></td> </tr> <tr> <td>信箱：</td><td><input name="Email" dataType="Repeat" to="Email" msg="两次输入的信箱不一致"></td> </tr> <tr> <td>QQ：</td><td><input name="QQ" require="false" dataType="QQ" msg="QQ号码不存在"></td> </tr> <tr> <td>身份证：</td><td><input name="Card" dataType="IdCard" msg="身份证号码不正确"></td> </tr> <tr> <td>年龄：</td><td><input name="Year" dataType="Range" msg="年龄必须在18~28之间" min="18" max="28"></td> </tr> <tr> <td>年龄1：</td><td><input name="Year1" require="false" dataType="Compare" msg="年龄必须在18以上" to="18" operator="GreaterThanEqual"></td> </tr> <tr> <td>电话：</td><td><input name="Phone" require="false" dataType="Phone" msg="电话号码不正确"></td> </tr> <tr> <td>手机：</td><td><input name="Mobile" require="false" dataType="Mobile" msg="手机号码不正确"></td> </tr> <tr> <td>生日：</td><td><input name="Birthday" dataType="Date" format="ymd" msg="生日日期不存在"></td> </tr> <tr> <td>邮政编码：</td><td><input name="Zip" dataType="Custom" regexp="^[1-9]\d{5}$" msg="邮政编码不存在"></td> </tr> <tr> <td>邮政编码：</td><td><input name="Zip1" dataType="Zip" msg="邮政编码不存在"></td> </tr> <tr> <td>操作系统：</td><td><select name="Operation" dataType="Require" msg="未选择所用操作系统" ><option value="">选择您所用的操作系统</option><option value="Win98">Win98</option><option value="Win2k">Win2k</option><option value="WinXP">WinXP</option></select></td> </tr> <tr> <td>所在省份：</td><td>广东<input name="Province" value="1" type="radio">陕西<input name="Province" value="2" type="radio">浙江<input name="Province" value="3" type="radio">江西<input name="Province" value="4" type="radio" dataType="Group" msg="必须选定一个省份" ></td> </tr> <tr> <td>爱好：</td><td>运动<input name="Favorite" value="1" type="checkbox">上网<input name="Favorite" value="2" type="checkbox">听音乐<input name="Favorite" value="3" type="checkbox">看书<input name="Favorite" value="4" type="checkbox"" dataType="Group" min="2" max="3" msg="必须选择2~3种爱好"></td> </tr> <td>自我介绍：</td><td><textarea name="Description" dataType="Limit" max="10" msg="自我介绍内容必须在10个字之内">中文是一个字</textarea></td> </tr> <td>自传：</td><td><textarea name="History" dataType="LimitB" min="3" max="10" msg="自传内容必须在[3,10]个字节之内">中文是两个字节t</textarea></td> </tr> <tr> <td colspan="2"><input name="Submit" type="submit" value="确定提交"><input onClick="Validator.Validate(document.getElementById('demo'))" value="检验模式1" type="button"><input onClick="Validator.Validate(document.getElementById('demo'),2)" value="检验模式2" type="button"><input onClick="Validator.Validate(document.getElementById('demo'),3)" value="检验模式3" type="button"></td> </tr> </form> </table> <script> /************************************************* Validator v1.01 code by 我佛山人 wfsr@cunite.com http://www.cunite.com *************************************************/ Validator = { Require : /.+/, Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, Phone : /^(($\d{3}$)|(\d{3}\-))?($0\d{2,3}$|0\d{2,3}-)?[1-9]\d{6,7}$/, Mobile : /^(($\d{3}$)|(\d{3}\-))?13\d{9}$/, Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/, IdCard : /^\d{15}(\d{2}[A-Za-z0-9])?$/, Currency : /^\d+(\.\d+)?$/, Number : /^\d+$/, Zip : /^[1-9]\d{5}$/, QQ : /^[1-9]\d{4,8}$/, Integer : /^[-\+]?\d+$/, Double : /^[-\+]?\d+(\.\d+)?$/, English : /^[A-Za-z]+$/, Chinese : /^[\u0391-\uFFE5]+$/, UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/, IsSafe : function(str){return !this.UnSafe.test(str);}, SafeString : "this.IsSafe(value)", Limit : "this.limit(value.length,getAttribute('min'), getAttribute('max'))", LimitB : "this.limit(this.LenB(value), getAttribute('min'), getAttribute('max'))", Date : "this.IsDate(value, getAttribute('min'), getAttribute('format'))", Repeat : "value == document.getElementsByName(getAttribute('to'))[0].value", Range : "getAttribute('min') < value && value < getAttribute('max')", Compare : "this.compare(value,getAttribute('operator'),getAttribute('to'))", Custom : "this.Exec(value, getAttribute('regexp'))", Group : "this.MustChecked(getAttribute('name'), getAttribute('min'), getAttribute('max'))", ErrorItem : [document.forms[0]], ErrorMessage : ["以下原因导致提交失败：\t\t\t\t"], Validate : function(theForm, mode){ var obj = theForm || event.srcElement; var count = obj.elements.length; this.ErrorMessage.length = 1; this.ErrorItem.length = 1; this.ErrorItem[0] = obj; for(var i=0;i<count;i++){ with(obj.elements[i]){ var _dataType = getAttribute("dataType"); if(typeof(_dataType) == "object" || typeof(this[_dataType]) == "undefined") continue; this.ClearState(obj.elements[i]); if(getAttribute("require") == "false" && value == "") continue; switch(_dataType){ case "Date" : case "Repeat" : case "Range" : case "Compare" : case "Custom" : case "Group" : case "Limit" : case "LimitB" : case "SafeString" : if(!eval(this[_dataType])) { this.AddError(i, getAttribute("msg")); } break; default : if(!this[_dataType].test(value)){ this.AddError(i, getAttribute("msg")); } break; } } } if(this.ErrorMessage.length > 1){ mode = mode || 1; var errCount = this.ErrorItem.length; switch(mode){ case 2 : for(var i=1;i<errCount;i++) this.ErrorItem[i].style.color = "red"; case 1 : alert(this.ErrorMessage.join("\n")); this.ErrorItem[1].focus(); break; case 3 : for(var i=1;i<errCount;i++){ try{ var span = document.createElement("SPAN"); span.id = "__ErrorMessagePanel"; span.style.color = "red"; this.ErrorItem[i].parentNode.appendChild(span); span.innerHTML = this.ErrorMessage[i].replace(/\d+:/,"*"); } catch(e){alert(e.description);} } this.ErrorItem[1].focus(); break; default : alert(this.ErrorMessage.join("\n")); break; } return false; } return true; }, limit : function(len,min, max){ min = min || 0; max = max || Number.MAX_VALUE; return min <= len && len <= max; }, LenB : function(str){ return str.replace(/[^\x00-\xff]/g,"**").length; }, ClearState : function(elem){ with(elem){ if(style.color == "red") style.color = ""; var lastNode = parentNode.childNodes[parentNode.childNodes.length-1]; if(lastNode.id == "__ErrorMessagePanel") parentNode.removeChild(lastNode); } }, AddError : function(index, str){ this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index]; this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":" + str; }, Exec : function(op, reg){ return new RegExp(reg,"g").test(op); }, compare : function(op1,operator,op2){ switch (operator) { case "NotEqual": return (op1 != op2); case "GreaterThan": return (op1 > op2); case "GreaterThanEqual": return (op1 >= op2); case "LessThan": return (op1 < op2); case "LessThanEqual": return (op1 <= op2); default: return (op1 == op2); } }, MustChecked : function(name, min, max){ var groups = document.getElementsByName(name); var hasChecked = 0; min = min || 1; max = max || groups.length; for(var i=groups.length-1;i>=0;i--) if(groups[i].checked) hasChecked++; return min <= hasChecked && hasChecked <= max; }, IsDate : function(op, formatString){ formatString = formatString || "ymd"; var m, year, month, day; switch(formatString){ case "ymd" : m = op.match(new RegExp("^((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})$")); if(m == null ) return false; day = m[6]; month = m[5]--; year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10)); break; case "dmy" : m = op.match(new RegExp("^(\\d{1,2})([-./])(\\d{1,2})\\2((\\d{4})|(\\d{2}))$")); if(m == null ) return false; day = m[1]; month = m[3]--; year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10)); break; default : break; } if(!parseInt(month)) return false; month = month==12 ?0:month; var date = new Date(year, month, day); return (typeof(date) == "object" && year == date.getFullYear() && month == date.getMonth() && day == date.getDate()); function GetFullYear(y){return ((y<30 ? "20" : "19") + y)|0;} } } </script> [b]十二漂亮的脚本日历：[/b] 运行代码框 <Script LANGUAGE="JavaScript"> var months = new Array("一", "二", "三","四", "五", "六", "七", "八", "九","十", "十一", "十二"); var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31); var days = new Array("日","一", "二", "三","四", "五", "六"); var classTemp; var today=new getToday(); var year=today.year; var month=today.month; var newCal; function getDays(month, year) { if (1 == month) return ((0 == year % 4) && (0 != (year % 100))) ||(0 == year % 400) ? 29 : 28; else return daysInMonth[month]; } function getToday() { this.now = new Date(); this.year = this.now.getFullYear(); this.month = this.now.getMonth(); this.day = this.now.getDate(); } function Calendar() { newCal = new Date(year,month,1); today = new getToday(); var day = -1; var startDay = newCal.getDay(); var endDay=getDays(newCal.getMonth(), newCal.getFullYear()); var daily = 0; if ((today.year == newCal.getFullYear()) &&(today.month == newCal.getMonth())) { day = today.day; } var caltable = document.all.caltable.tBodies.calendar; var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear()); for (var intWeek = 0; intWeek < caltable.rows.length;intWeek++) for (var intDay = 0;intDay < caltable.rows[intWeek].cells.length;intDay++) { var cell = caltable.rows[intWeek].cells[intDay]; var montemp=(newCal.getMonth()+1)<10?("0"+(newCal.getMonth()+1)):(newCal.getMonth()+1); if ((intDay == startDay) && (0 == daily)){ daily = 1;} var daytemp=daily<10?("0"+daily):(daily); var d="<"+newCal.getFullYear()+"-"+montemp+"-"+daytemp+">"; if(day==daily) cell.className="DayNow"; else if(intDay==6) cell.className = "DaySat"; else if (intDay==0) cell.className ="DaySun"; else cell.className="Day"; if ((daily > 0) && (daily <= intDaysInMonth)) { cell.innerText = daily; daily++; } else { cell.className="CalendarTD"; cell.innerText = ""; } } document.all.year.value=year; document.all.month.value=month+1; } function subMonth() { if ((month-1)<0) { month=11; year=year-1; } else { month=month-1; } Calendar(); } function addMonth() { if((month+1)>11) { month=0; year=year+1; } else { month=month+1; } Calendar(); } function setDate() { if (document.all.month.value<1||document.all.month.value>12) { alert("月的有效范围在1-12之间!"); return; } year=Math.ceil(document.all.year.value); month=Math.ceil(document.all.month.value-1); Calendar(); } </Script> <Script> function buttonOver() { var obj = window.event.srcElement; obj.runtimeStyle.cssText = "background-color:#FFFFFF"; // obj.className="Hover"; } function buttonOut() { var obj = window.event.srcElement; window.setTimeout(function(){obj.runtimeStyle.cssText = "";},300); } </Script> <Style> Input {font-family: verdana;font-size: 9pt;text-decoration: none;background-color: #FFFFFF;height: 20px;border: 1px solid #666666;color:#000000;} .Calendar {font-family: verdana;text-decoration: none;width: 170;background-color: #C0D0E8;font-size: 9pt;border:0px dotted #1C6FA5;} .CalendarTD {font-family: verdana;font-size: 7pt;color: #000000;background-color:#f6f6f6;height: 20px;width:11%;text-align: center;} .Title {font-family: verdana;font-size: 11pt;font-weight: normal;height: 24px;text-align: center;color: #333333;text-decoration: none;background-color: #A4B9D7;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-bottom-style:1px;border-top-color: #999999;border-right-color: #999999;border-bottom-color: #999999;border-left-color: #999999;} .Day {font-family: verdana;font-size: 7pt;color:#243F65;background-color: #E5E9F2;height: 20px;width:11%;text-align: center;} .DaySat {font-family: verdana;font-size: 7pt;color:#FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;} .DaySun {font-family: verdana;font-size: 7pt;color: #FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;} .DayNow {font-family: verdana;font-size: 7pt;font-weight: bold;color: #000000;background-color: #FFFFFF;height: 20px;text-align: center;} .DayTitle {font-family: verdana;font-size: 9pt;color: #000000;background-color: #C0D0E8;height: 20px;width:11%;text-align: center;} .DaySatTitle {font-family: verdana;font-size: 9pt;color:#FF0000;text-decoration: none;background-color:#C0D0E8;text-align: center;height: 20px;width: 12%;} .DaySunTitle {font-family: verdana;font-size: 9pt;color: #FF0000;text-decoration: none;background-color: #C0D0E8;text-align: center;height: 20px;width: 12%;} .DayButton {font-family: Webdings;font-size: 9pt;font-weight: bold;color: #243F65;cursor:hand;text-decoration: none;} </Style> <table border="0" cellpadding="0" cellspacing="1" class="Calendar" id="caltable"> <thead> <tr align="center" valign="middle"> <td colspan="7" class="Title"> <a href="javaScript:subMonth();" title="上一月" Class="DayButton">3</a> <input name="year" type="text" size="4" maxlength="4" onkeydown="if (event.keyCode==13){setDate()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 年 <input name="month" type="text" size="1" maxlength="2" onkeydown="if (event.keyCode==13){setDate()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 月 <a href="JavaScript:addMonth();" title="下一月" Class="DayButton">4</a> </td> </tr> <tr align="center" valign="middle"> <Script LANGUAGE="JavaScript"> document.write("<TD class=DaySunTitle id=diary >" + days[0] + "</TD>"); for (var intLoop = 1; intLoop < days.length-1;intLoop++) document.write("<TD class=DayTitle id=diary>" + days[intLoop] + "</TD>"); document.write("<TD class=DaySatTitle id=diary>" + days[intLoop] + "</TD>"); </Script> </TR> </thead> <TBODY border=1 cellspacing="0" cellpadding="0" ID="calendar" ALIGN=CENTER ONCLICK="getDiary()"> <Script LANGUAGE="JavaScript"> for (var intWeeks = 0; intWeeks < 6; intWeeks++) { document.write("<TR style='cursor:hand'>"); for (var intDays = 0; intDays < days.length;intDays++) document.write("<TD class=CalendarTD onMouseover='buttonOver();' onMouseOut='buttonOut();'></TD>"); document.write("</TR>"); } </Script> </TBODY> </TABLE> <Script LANGUAGE="JavaScript"> Calendar(); </Script> [b]十三进入,退出页面的各种效果:[/b] 进入页面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)"> 推出页面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)"> 这个是页面被载入和调出时的一些特效。duration表示特效的持续时间，以秒为单位。transition表示使用哪种特效，取值为1-23: 　　0 矩形缩小　　1 矩形扩大　　2 圆形缩小　　3 圆形扩大　　4 下到上刷新　　5 上到下刷新　　6 左到右刷新　　7 右到左刷新　　8 竖百叶窗　　9 横百叶窗　　10 错位横百叶窗　　11 错位竖百叶窗　　12 点扩散　　13 左右到中间刷新　　14 中间到左右刷新　　15 中间到上下　　16 上下到中间　　17 右下到左上　　18 右上到左下　　19 左上到右下　　20 左下到右上　　21 横条　　22 竖条　　23 以上22种随机选择一种 [b]十四很酷的效果,表格被选中回变颜色:[/b] 运行代码框 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <html> <head> </head> <title>Mapabc地图无限</title> <script language="JavaScript"> var searchResult=new Array();//鼠标滑过时显示背景色 function borderize(what,color,color2) { what.style.borderColor=color what.style.backgroundColor=color2 } function borderize_on(e){ if (document.all) source3=event.srcElement else if (document.getElementById) source3=e.target if (source3.className=="zuo22"){ borderize(source3,"#999999","#F6F6F8") } else{ while(source3.tagName!="TABLE"){ source3=document.getElementById? source3.parentNode : source3.parentElement if (source3.className=="zuo22") borderize(source3,"#999999","#F6F6F8") } } } function borderize_off(e){ if (document.all) source4=event.srcElement else if (document.getElementById) source4=e.target if (source4.className=="zuo22") borderize(source4,"white","white") else{ while(source4.tagName!="TABLE"){ source4=document.getElementById? source4.parentNode : source4.parentElement if (source4.className=="zuo22") borderize(source4,"white","white") } } } </script> <body > <table width="96%" border="0" onMouseOver="borderize_on(event)" onMouseOut="borderize_off(event)" class="zuo22" onclick="javascript:clickfun('123')"> <TR> <TD>把鼠标移过来</TD> <TD>把鼠标移过来</TD> </TR> <TR> <TD>把鼠标移过来</TD> <TD>把鼠标移过来</TD> </TR> <TR> <TD>把鼠标移过来</TD> <TD>把鼠标移过来</TD> </TR> <TR> <TD>把鼠标移过来</TD> <TD>把鼠标移过来</TD> </TR> </table> </body> </html> [b]十五弹出提示的效果：[/b] 运行代码框 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>cao888---提示</title> </head> <body> <script language=javascript> var cao_x,cao_y; function cao888() { this.display=display; } function display() { document.write("<table align=center><tr><td><button style='width:100px;height:30px;font-size:12px;border:1px solid #A4B3C8;background-color:green;' type=button onclick=document.getElementById('cao1').style.display='block' onfocus=this.blur()>CAO留言</button></td></tr></table>"); document.write("<div id='cao1' style='font-size:12px;position:absolute;display:none;text-align:center;overflow:visible'>"); document.write("<div style='position:absolute;top:expression((body.clientHeight-300)/2);left:expression((body.clientWidth-200)/2);width:200px;height:180px;background-color:#dbdbdb;border:1px solid #cccccc;'>"); document.write("<table width=200 height=20 bgcolor=green onmousedown='cao_x=event.x-parentNode.style.pixelLeft;cao_y=event.y-parentNode.style.pixelTop;setCapture();' onmouseup='releaseCapture();' onmousemove='caoMove(this.parentNode)' style='cursor:move;'>"); document.write("<tr align=center>"); document.write("<td align=left>提示:CAO888</td>"); document.write("</tr>"); document.write("</table>"); document.write("<span style= cursor:hand onclick=this.parentNode.parentNode.style.display='none';><img src='http://pic1.blueidea.com/bbs/topic5.gif'><br>CAO呀,错误了...<br>[确定]</span>"); document.write(" </div>"); document.write("</div>"); } function caoMove(obj) //实现层的拖移 { if(event.button==1) { var caoX=obj.clientLeft; var caoY=obj.clientTop; obj.style.pixelLeft=caoX+(event.x-cao_x); obj.style.pixelTop=caoY+(event.y-cao_y); } } </script> <script language=javascript> var mycao=new cao888(); mycao.display(); </script> </body> </html> [b]十六图片之间的切换：[/b] 运行代码框 <script language=JavaScript>  </sc</div>  <a name="pj"></a> <div class="pinlun fontyh"> <ul class="plu1"> <li class="l1"><strong>全部评论</strong>(0)</li><li class="l2"></li> </ul> <form name="f1" method="post" target="_blank" onSubmit="return newspj()"> <input type="hidden" value="119856" name="bh" /> <ul class="plu0"> <li class="l1"><textarea id="pjt" name="pjt">

[展开所有评论]

上一篇：JS实现输入框提示文字点击时消失效果
下一篇：JS实现跟随鼠标的链接文字提示框效果

资讯排行榜
更多>>