Javascript技术技巧大全

//各种尺寸

• s+=" 网页可见区域宽："+document.body.clientWidth;
  s+=" 网页可见区域 高："+document.body.clientHeight;
  s+=" 网页可见区域高："+document.body.offsetWeight+"(包括边线的宽)";
  s+=" 网 页可见区域高："+document.body.offsetHeight+"(包括边线 的宽)";
  s+=" 网页正文全文 宽："+document.body.scrollWidth;
  s+=" 网页正文全文高："+document.body.scrollHeight;
  s+=" 网页被卷去的 高："+document.body.scrollTop;
  s+=" 网页被卷去的左："+document.body.scrollLeft;
  s+=" 网页正文部分上："+window.screenTop;
  s+=" 网页正文部分 左："+window.screenLeft;
  s+=" 屏幕 分辨率的高："+window.screen.height;
  s+=" 屏幕分辨率的宽："+window.screen.width;
  s+=" 屏幕可用工作区高度："+window.screen.availHeight;
  s+=" 屏幕可用工作区宽 度："+window.screen.availWidth;

//过滤数字

//特殊用途

//不缓存

//正则匹配

匹配中文字符的正则表达式：[u4e00-u9fa5]
匹配双字节字符(包括汉字在内)：[^x00-xff]
匹配空行的正则表达式： [s|]*
匹配HTML标记的正则表达式：/< (.*)>.*|<(.*)/>/
匹配首尾空格的正则表达式：(^s*)|(s*$)（像vbscript那样的trim函数）
匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
匹配网址URL的正则表达式：http://([w-]+.)+[w-]+(/[w-./?%&=]*)?
以下是例子：
利用正则表达式限制网页表单里 的文本框输入内容：
用正则表达式限制只能输入中文：onkeyup="value=value.replace(/[^u4E00- u9FA5]/g,"")"onbeforepaste="clipboardData.setData("text",clipboardData.getData ("text").replace(/[^u4E00-u9FA5]/g,""))"
1.用正则表达式限制只能输入全角字符：onkeyup="value=value.replace(/[^uFF00-uFFFF]/g,"")"onbeforepaste="clipboardData.setData("text",clipboardData.getData("text").replace(/[^uFF00-uFFFF]/g,""))"
2.用正则表 达式限制只能输入数字：onkeyup="value=value.replace(/[^d]/g,"")"onbeforepaste="clipboardData.setData("text",clipboardData.getData("text").replace(/[^d]/g,""))"
3.用正则 表达式限制只能输入数字和英文：onkeyup="value=value.replace(/[W]/g,"") "onbeforepaste="clipboardData.setData("text",clipboardData.getData("text").replace (/[^d]/g,""))"

//消除图像工具栏

"mypicture.jpg"HEIGHT="100px"WIDTH="100px"GALLERYIMG="false">
or

"imagetoolbar"content="no">

//无提示关闭

functionClose()
{
varua=navigator.userAgent
varie=navigator.appName=="MicrosoftInternetExplorer"?true:false
if(ie)
{
varIEversion=parseFloat(ua.substring(ua.indexOf("MSIE") +5,ua.indexOf(";",ua.indexOf("MSIE"))))
if(IEversion<5.5)
{
varstr=""clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">"
str+=""Command"value="Close">";
document.body.insertAdjacentHTML("beforeEnd",str);
document.all.noTipClose.Click();
}
else
{
window.opener=null;
window.close();
}
}
else
{
window.close()
}
}

//取得控件得绝对位置(1)

"javascript">
functiongetoffset(e)
{
vart=e.offsetTop;
varl=e.offsetLeft;
while(e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetLeft;
}
varrec=newArray(1);
rec[0]=t;
rec[1]=l;
returnrec
}

//获得控件的绝对位置(2)

oRect=obj.getBoundingClientRect();
oRect.left
oRect.

//最小化,最大化,关闭

//光标停在文字最后

"javascript">
functioncc()
{
vare=event.srcElement;
varr=e.createTextRange();
r.moveStart("character",e.value.length);
r.collapse(true);
r.select();
}

"123"onfocus="cc()">

//页面进入和退出的特效

进入页面"Page-Enter"content="revealTrans (duration=x,transition=y)">
推出页面"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

//网页是否被检索

"ROBOTS"content="属性值">
　　其中属性值有以下一些:
　　 属性值为"all":文件将被检索，且页上链接可被查询；
　　属性值为"none":文件不被检索，而且不查询页上的链接；
　　属性值为"index":文件将被检索；
　　属性值为"follow":查询页上的链 接；
　　属性值为"noindex":文件不检索，但可被查询链接；
　　属性值为"nofollow":

=======================================================

//移动的图层，拖动

1.<spanstyle="position:absolute;width:200;height:200;background:red"onmousedown=MouseDown(this)onmousemove=MouseMove()onmouseup=MouseUp()>meizz</span>
<scriptlanguage=javascript>
varObj;
functionMouseDown(obj)
{
Obj=obj;
Obj.setCapture();
Obj.l=event.x-Obj.style.pixelLeft;
Obj.t=event.y-Obj.style.pixelTop;
}
functionMouseMove()
{
if(Obj! =null)
{
Obj.style.left=event.x- Obj.l;
Obj.style.top=event.y-Obj.t;
}
}
functionMouseUp()
{
if(Obj!=null)
{
Obj.releaseCapture();
Obj=null;
}
}
</script>
2.
<divid="myDiv"src="logo.gif"ondrag="doDrag();"onmouseover="this.style.cursor="hand""style="position:absolute;left=100;top=100;"onmousedown="doMouseDown ();">
<ahref="#"onclick="returnfalse"><h1>wlecome</h1></a>
</div>
<scriptlanguage="JavaScript"type="text/javascript">
varorgMouseX;
varorgMouseY;
varorgObjX;
varorgObjY;
functiondoDrag()
{
varmyObject=document.all.myDiv;

varx=event.clientX;
vary=event.clientY;
myObject.style.left=x-(orgMouseX-orgObjX);
myObject.style.top=y-(orgMouseY-orgObjY);

}
functiondoMouseDown()
{
orgMouseX=event.clientX;
orgMouseY=event.clientY;
orgObjX=parseInt(document.all.myDiv.style.left);
orgObjY=parseInt(document.all.myDiv.style.top);
}

</script>

//文档状态改变

<iframesrc="a.html"id="f"name="f"scrolling="no"frameborder=0marginwidth=0marginheight=0></iframe>
<script>
vardoc=window.frames["f"].document;
functions(){
if (doc.readyState=="complete"){
document.all.f.style.height=doc.body.scrollHeight
document.all.f.style.width=doc.body.scrollWidth
}
}
doc.onreadystatechange=s
</script>

<HTML>
<HEAD>
<METANAME="save"CONTENT="history">
<STYLE>
.sHistory{behavior:url(#default#savehistory);}
</STYLE>
</HEAD>
<BODY>
<INPUTclass=sHistorytype=textid=oPersistInput>
</BODY>
</HTML>

//访问剪贴板

//操作COOKIE

functionSetCookie(sName,sValue)
{
document.cookie=sName+"="+escape(sValue) +";";
}
functionGetCookie(sName)
{
varaCookie=document.cookie.split(";");
for(vari=0;i<aCookie.length;i++)
{

varaCrumb=aCookie [i].split("=");
if (sName==aCrumb[0])
returnunescape(aCrumb[1]);
}

}
functionDelCookie(sName)
{
document.cookie=sName+"="+escape(sValue) +";expires=Fri,31Dec199923:59:59GMT;";
}

//setTimeout增加参数

<script>
var_st=window.setTimeout;
window.setTimeout=function(fRef,mDelay){
if (typeoffRef=="function"){
varargu=Array.prototype.slice.call(arguments,2);
varf=(function() {fRef.apply(null,argu);});
return_st(f,mDelay);
}
return_st (fRef,mDelay);
}
functiontest(x){
alert(x);
}
window.setTimeout(test,1000,"fason");
</script>

//自定义的apply,call

Function.prototype.apply=function(obj,argu){
if (obj)obj.constructor.prototype._caller=this;
varargus=newArray();
for(vari=0;i<argu.length;i++)
argus[i]="argu["+i+"]";
varr;
eval("r="+(obj?("obj._caller ("+argus.join(",")+");"):("this("+argus.join(",")+");")));
returnr;
};
Function.prototype.call=function(obj){
varargu=newArray();
for(vari=1;i<arguments.length;i++)
argu[i-1]=arguments[i];
returnthis.apply(obj,argu);
};

==========================================================

(1)拖拽访问
event.dataTransfer.setData("URL",oImage.src);
sImageURL=event.dataTransfer.getData("URL")
(2)普通访问
window.clipboardData.setData("Text",oSource.innerText);
window.clipboardData.getData("Text");

//刷新后不变的文本框

//计算内容宽和高

//屏蔽按键

<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<noscript><metahttp-equiv="refresh"content="0;url=about:noscript"></noscript>
<title>屏蔽鼠标右键、Ctrl+N、Shift+F10、Alt+F4、F11、F5刷新、退格键</title>
</head>
<body>
<scriptlanguage="Javascript"><!--
//屏蔽鼠标右键、Ctrl+N、Shift+F10、F11、F5刷新、退格键
//Author:meizz(梅花雨)2002-6-18
functiondocument.oncontextmenu(){event.returnValue=false;}//屏蔽鼠标右键
functionwindow.onhelp(){returnfalse}//屏蔽F1帮助
functiondocument.onkeydown()
{
if((window.event.altKey)&&
((window.event.keyCode==37)||//屏蔽Alt+方向键←
(window.event.keyCode==39)))//屏蔽Alt+方向键→
{
alert("不准你使用ALT+方向键前进或后退网页！");
event.returnValue=false;
}
/*注：这还不是真正地屏蔽Alt+方向键，
因为Alt+方向键弹出警告框时，按住Alt键不放，
用鼠标点掉警告框，这种屏蔽方法就失效了。以后若
有哪位高手有真正屏蔽Alt键的方法，请告知。*/
if((event.keyCode==8)||//屏蔽退格删除键
(event.keyCode==116)||//屏蔽F5刷新键
(event.ctrlKey&&event.keyCode==82)){//Ctrl+R
event.keyCode=0;
event.returnValue=false;
}
if(event.keyCode==122){event.keyCode=0;event.returnValue=false;}//屏蔽F11
if(event.ctrlKey&&event.keyCode==78)event.returnValue=false;//屏蔽Ctrl+n
if(event.shiftKey&&event.keyCode==121)event.returnValue=false;//屏蔽shift+F10
if(window.event.srcElement.tagName=="A"&&window.event.shiftKey)
window.event.returnValue=false;//屏蔽shift加鼠标左键新开一网页
if((window.event.altKey)&&(window.event.keyCode==115))//屏蔽Alt+F4
{
window.showModelessDialog("about:blank","","dialogWidth:1px;dialogheight:1px");
returnfalse;
}
}
</script>
屏蔽鼠标右键、Ctrl+N、Shift+F10、Alt+F4、F11、F5刷新、退格键
</body>
</html>

//屏蔽打印
<style>
@media print{
* {display:none}
}
</style>

//移动的图层，拖动

1.<spanstyle='position:absolute;width:200;height:200;background:red'onmousedown=MouseDown(this)onmousemove=MouseMove()onmouseup=MouseUp()>meizz</span>
<scriptlanguage=javascript>
varObj;
functionMouseDown(obj)
{
Obj=obj;
Obj.setCapture();
Obj.l=event.x-Obj.style.pixelLeft;
Obj.t=event.y-Obj.style.pixelTop;
}
functionMouseMove()
{
if(Obj!=null)
{
Obj.style.left=event.x-Obj.l;
Obj.style.top=event.y-Obj.t;
}
}
functionMouseUp()
{
if(Obj!=null)
{
Obj.releaseCapture();
Obj=null;
}
}
</script>
2.
<divid="myDiv"src="logo.gif"ondrag="doDrag();"onmouseover="this.style.cursor='hand'"style="position:absolute;left=100;top=100;"onmousedown="doMouseDown();">
<ahref="#"onclick="returnfalse"><h1>wlecome</h1></a>
</div>
<scriptlanguage="JavaScript"type="text/javascript">
varorgMouseX;
varorgMouseY;
varorgObjX;
varorgObjY;
functiondoDrag()
{
varmyObject=document.all.myDiv;

varx=event.clientX;
vary=event.clientY;
myObject.style.left=x-(orgMouseX-orgObjX);
myObject.style.top=y-(orgMouseY-orgObjY);

}
functiondoMouseDown()
{
orgMouseX=event.clientX;
orgMouseY=event.clientY;
orgObjX=parseInt(document.all.myDiv.style.left);
orgObjY=parseInt(document.all.myDiv.style.top);
}

</script>

//文档状态改变

<iframesrc="a.html"id="f"name="f"scrolling="no"frameborder=0marginwidth=0marginheight=0></iframe>
<script>
vardoc=window.frames["f"].document;
functions(){
if(doc.readyState=="complete"){
document.all.f.style.height=doc.body.scrollHeight
document.all.f.style.width=doc.body.scrollWidth
}
}
doc.onreadystatechange=s
</script>

=====================================================

//刷新后不变的文本框

<HTML>
<HEAD>
<METANAME="save"CONTENT="history">
<STYLE>
.sHistory{behavior:url(#default#savehistory);}
</STYLE>
</HEAD>
<BODY>
<INPUTclass=sHistorytype=textid=oPersistInput>
</BODY>
</HTML>

//访问剪贴板

//操作COOKIE

functionSetCookie(sName,sValue)
{
document.cookie=sName+"="+escape(sValue)+";";
}
functionGetCookie(sName)
{
varaCookie=document.cookie.split(";");
for(vari=0;i<aCookie.length;i++)
{

varaCrumb=aCookie[i].split("=");
if(sName==aCrumb[0])
returnunescape(aCrumb[1]);
}

}
functionDelCookie(sName)
{
document.cookie=sName+"="+escape(sValue)+";expires=Fri,31Dec199923:59:59GMT;";
}

//setTimeout增加参数

<script>
var_st=window.setTimeout;
window.setTimeout=function(fRef,mDelay){
if(typeoffRef=='function'){
varargu=Array.prototype.slice.call(arguments,2);
varf=(function(){fRef.apply(null,argu);});
return_st(f,mDelay);
}
return_st(fRef,mDelay);
}
functiontest(x){
alert(x);
}
window.setTimeout(test,1000,'fason');
</script>

//自定义的apply,call

Function.prototype.apply=function(obj,argu){
if(obj)obj.constructor.prototype._caller=this;
varargus=newArray();
for(vari=0;i<argu.length;i++)
argus[i]="argu["+i+"]";
varr;
eval("r="+(obj?("obj._caller("+argus.join(",")+");"):("this("+argus.join(",")+");")));
returnr;
};
Function.prototype.call=function(obj){
varargu=newArray();
for(vari=1;i<arguments.length;i++)
argu[i-1]=arguments[i];
returnthis.apply(obj,argu);
};

//下载文件

functionDownURL(strRemoteURL,strLocalURL)
{
try
{
varxmlHTTP=newActiveXObject("Microsoft.XMLHTTP");
xmlHTTP.open("Get",strRemoteURL,false);
xmlHTTP.send();
varadodbStream=newActiveXObject("ADODB.Stream");
adodbStream.Type=1;//1=adTypeBinary
adodbStream.Open();
adodbStream.write(xmlHTTP.responseBody);
adodbStream.SaveToFile(strLocalURL,2);
adodbStream.Close();
adodbStream=null;
xmlHTTP=null;

}
catch(e)
{
window.confirm("下载URL出错!");
}
//window.confirm("下载完成.");
}

//检验连接是否有效

functiongetXML(URL)
{
varxmlhttp=newActiveXObject("microsoft.xmlhttp");
xmlhttp.Open("GET",URL,false);
try
{
xmlhttp.Send();
}
catch(e){}
finally
{
varresult=xmlhttp.responseText;
if(result)
{
if(xmlhttp.Status==200)
{
return(true);
}
else
{
return(false);
}
}
else
{
return(false);
}
}
}

==============================================================

//POST代替FORM

<SCRIPTlanguage="VBScript">
FunctionURLEncoding(vstrIn)
strReturn=""
Fori=1ToLen(vstrIn)
ThisChr=Mid(vStrIn,i,1)
IfAbs(Asc(ThisChr))<&HFFThen
strReturn=strReturn&ThisChr
Else
innerCode=Asc(ThisChr)
IfinnerCode<0Then
innerCode=innerCode+&H10000
EndIf
Hight8=(innerCodeAnd&HFF00)\&HFF
Low8=innerCodeAnd&HFF
strReturn=strReturn&"%"&Hex(Hight8)&"%"&Hex(Low8)
EndIf
Next
URLEncoding=strReturn
EndFunction
Functionbytes2BSTR(vIn)
strReturn=""
Fori=1ToLenB(vIn)
ThisCharCode=AscB(MidB(vIn,i,1))
IfThisCharCode<&H80Then
strReturn=strReturn&Chr(ThisCharCode)
Else
NextCharCode=AscB(MidB(vIn,i+1,1))
strReturn=strReturn&Chr(CLng(ThisCharCode)*&H100+CInt(NextCharCode))
i=i+1
EndIf
Next
bytes2BSTR=strReturn
EndFunction
dimstrA,oReq
strA=URLEncoding("submit1=Submit&text1=中文")
setoReq=CreateObject("MSXML2.XMLHTTP")
oReq.open"POST","http://ServerName/VDir/TstResult.asp",false
oReq.setRequestHeader"Content-Length",Len(strA)
oReq.setRequestHeader"CONTENT-TYPE","application/x-www-form-urlencoded"
oReq.sendstrA
msgboxbytes2BSTR(oReq.responseBody)
</SCRIPT>

//readyState是xmlhttp返回数据的进度，0=载入中,1=未初始化,2=已载入,3=运行中,4=完成

//组件是否安装
isComponentInstalled("{6B053A4B-A7EC-4D3D-4567-B8FF8A1A5739}", "componentID"))

//检查网页是否存在

functionCheckURL(URL)
{
varxmlhttp=newActiveXObject("Microsoft.XMLHTTP");
xmlhttp.Open("GET",URL,false);
try
{
xmlhttp.Send();
varresult=xmlhttp.status;
}
catch(e){return(false);}
if(result==200)
{
returntrue;
}
xmlhttp=null;
returnfalse;
}

//连接数据库

<scriptlanguage="javascript">
//用JavaScript写服务器端连接数据库的代码示例
varconn=newActiveXObject("ADODB.Connection");
conn.Open("Provider=SQLOLEDB.1;DataSource=localhost;UserID=sa;"
+"Password=;InitialCatalog=pubs");
varrs=newActiveXObject("ADODB.Recordset");
varsql="select*fromauthors";
rs.open(sql,conn);
shtml="<tablewidth='100%'border=1>";
shtml+="<trbgcolor='#f4f4f4'><td>au_id</td><td>au_lname</td><td>au_fname</td><td>phone</td><td>address</td><td>city</td><td>state</td><td>zip</td></tr>";
while(!rs.EOF)
{
shtml+="<tr><td>"+rs("au_id")+"</td><td>"+rs("au_lname")+"</td><td>"+rs("au_fname")+"</td><td>"+rs("phone")+"</td><td>"+rs("address")+"</td><td>"+rs("city")+"</td><td>"+rs("state")+"</td><td>"+rs("zip")+"</td></tr>";
rs.moveNext;
}
shtml+="</table>";
document.write(shtml);
rs.close();
rs=null;
conn.close();
conn=null;
</script>

//使用数据岛

<html>
<body>
srno：<inputtype=textdatasrc=#xmldateDataFLD=srnosize="76"><BR>
times：<inputtype=textdatasrc=#xmldateDataFLD=timessize="76"><BR>
<inputid="first"TYPE=buttonvalue="<<　第一条记录"onclick="xmldate.recordset.moveFirst()">
<inputid="prev"TYPE=buttonvalue="<上一条记录"onclick="xmldate.recordset.movePrevious()">
<inputid="next"TYPE=buttonvalue="下一条记录>"onclick="xmldate.recordset.moveNext()">
<inputid="last"TYPE=buttonvalue="最后一条记录>>"onclick="xmldate.recordset.moveLast()">
<inputid="Add"TYPE=buttonvalue="添加新记录"onclick="xmldate.recordset.addNew()">

<XMLID="xmldate">
<infolist>
<info><srno>20041025-01</srno><times>null</times></info>
<info><srno>20041101-09</srno><times>2004年10月1日2点22分0秒</times></info>
</infolist>
</XML>
</body>
</html>

//获得参数

<body>
<ahref="javascript:location.href=location.href+'?a=1&b=2'">search</a>
<scriptlanguage="JavaScript">
<!--
vara=location.search.substr(1);
if(a.length>0)
{
varre=/([^&]*?)\=([^&]*)/g
vars=a.match(re);
for(vari=0;i<s.length;i++)
{
alert(s[i]);
alert(s[i].split("=")[1]);
}
}
//-->
</script>
</body>

//可编辑SELECT

<inputtype=textname=re_namestyle="width:100px;height:21px;font-size:10pt;"><spanstyle="width:18px;border:0pxsolidred;"><selectname="r00"style="margin-left:-100px;width:118px;background-color:#FFEEEE;"onChange="document.all.re_name.value=this.value;">
<optionvalue="1">11111111<option>
<optionvalue="2">222222</option>
<optionvalue="3">333333</option>
</select>
</span>

(1)拖拽访问
event.dataTransfer.setData("URL",oImage.src);
sImageURL=event.dataTransfer.getData("URL")
(2)普通访问
window.clipboardData.setData("Text",oSource.innerText);
window.clipboardData.getData("Text");

<SCRIPTlanguage="javascript">
functiontest(obj)
{
varrange=obj.createTextRange();
alert("内容区宽度:"+range.boundingWidth
+"px\r\n内容区高度:"+range.boundingHeight+"px");

}
</SCRIPT>
<BODY>
<Textareaid="txt"height="150">sdf</textarea><INPUTtype="button"value="计算内容宽度"onClick="test(txt)">
</BODY>

//无模式的提示框

functionmodelessAlert(Msg)
{
window.showModelessDialog("javascript:alert(\""+escape(Msg)+"\");window.close();","","status:no;resizable:no;help:no;dialogHeight:height:30px;dialogHeight:40px;");
}

"clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
"Command"value="Minimize">
"clsid:ADB880A6-D8FF-11CF-9377- 00AA003B7A11">
"Command"value="Maximize">
"clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
"Command"value="Close">

"pragma"CONTENT="no-cache">
"Cache-Control"CONTENT="no-cache,must- revalidate">
"expires"CONTENT="0">

"window.external.ImportExportFavorites(true,"http://localhost");">
"window.external.ImportExportFavorites(false,"http://localhost");">
"window.external.ShowBrowserUI("OrganizeFavorites",null)">
"window.external.ShowBrowserUI("LanguageDialog",null)">
"window.external.AddFavorite("http://www.google.com/","google")">
"window.external.addChannel("http://www.google.com/")">
"window.external.showBrowserUI("PrivacySettings",null)">

"returnevent.keyCode>=48&&event.keyCode<=57||(this.value.indexOf(".")<0? event.keyCode==46:false)"onpaste="return!clipboardData.getData("text").match (/D/)"ondragenter="returnfalse">