JS技巧集锦
本文汇总了多种实用的JavaScript技巧，包括获取URL参数、操作Cookie、实现文件下载等，同时还介绍了如何自定义提示条、实现刷新后不变的文本框等功能。
Q：javascript中获取地址栏参数例如 index.asp?aaa=xxx&bbb=xxx，怎么用javascript取到QureyString中参数的名称呢？
A：
方案一：由于url里面的参数是不区分大小写的，而javascript是区分大小写的，所以我这里把全部的字符都转换成大写以后才进行处理。所以返回的内容一定是全部大写的字符串，所以大家在使用这个函数的时候要注意这一点。
方案一1
function getValue(name) 2
{3
var str=window.location.search.toUpperCase(); 4
name = name.toUpperCase();5
6
if (str.indexOf(name)!=-1) 7
{8
var pos_start=str.indexOf(name)+name.length+1; 9
var pos_end=str.indexOf("&",pos_start); 10
if (pos_end==-1) 11
{12
return str.substring(pos_start).toUpperCase(); 13
}14
else15
{16
return str.substring(pos_start,pos_end).toUpperCase();17
}18
} 19
else 20
{ 21
return ""; 22
} 23
} 24
方案二：直接拆分成Array了，可以直接通过Array获取
方案二1
function getValue(name)2
{3
var URLParams = new Array(); 4
var aParams = document.location.search.substr(1).split('&'); 5
for (i=0; i < aParams.length i++)6
{ 7
var aParam = aParams.split('='); 8
URLParams[aParam[0]] = aParam[1]; 9
}10
return URLParams["name"]11
}12
方案三：这个用正则表达式分析出来的
方案三1
<script type="text/javascript"> 2
Request = { QueryString : function(item){ var svalue = location.search.match(new RegExp("[\?\&]" + item + "=([^\&]*)(\&?)","i")); return svalue ? svalue[1] : svalue; } } 3
alert(Request.QueryString("id")); 4
</script>
Q：如何实现刷新后不变的文本框
A：
刷新后不变的文本框1
<HTML>2
<HEAD>3
<META NAME="save" CONTENT="history">4
<STYLE>5
.sHistory {behavior:url(#default#savehistory);}6
</STYLE>7
</HEAD>8
<BODY>9
<INPUT class=sHistory type=text id=oPersistInput>10
</BODY>11
</HTML>Q：如何访问剪贴板
A：
(1)拖拽访问
event.dataTransfer.setData("URL", oImage.src);
sImageURL = event.dataTransfer.getData("URL")
(2)普通访问
window.clipboardData.setData("Text",oSource.innerText);
window.clipboardData.getData("Text");
Q：如何操作COOKIE
A：
操作COOKIE1
function SetCookie(sName, svalue)2
{3
documents.cookie = sName + "=" + escape(svalue) + "; ";4
}5
function GetCookie(sName)6
{7
var aCookie = documents.cookie.split("; ");8
for (var i=0; i < aCookie.length; i++)9
{10
var aCrumb = aCookie[i].split("=");11
if (sName == aCrumb[0])12
return unescape(aCrumb[1]);13
}14
15
}16
function DelCookie(sName)17
{18
documents.cookie = sName + "=" + escape(svalue) + "; expires=Fri, 31 Dec 1999 23:59:59 GMT;";19
}20
Q：如何让setTimeout增加参数
A：
给setTimeout增加参数1
<script>2
var _st = window.setTimeout;3
window.setTimeout = function(fRef, mDelay) 4
{5
if(typeof fRef == 'function')6
{7
var argu = Array.prototype.slice.call(arguments,2);8
var f = (function(){ fRef.apply(null, argu); });9
return _st(f, mDelay);10
}11
return _st(fRef,mDelay);12
}13
function test(x)14
{15
alert(x);16
}17
window.setTimeout(test,1000,'fason');18
</script>Q：如何自定义apply,call
A：
自定义apply,call1
Function.prototype.apply = function (obj, argu) 2
{3
if (obj) obj.constructor.prototype._caller = this;4
var argus = new Array();5
for (var i=0;i<argu.length;i++)6
argus[i] = "argu[" + i + "]";7
var r;8
eval("r = " + (obj ? ("obj._caller(" + argus.join(",") + ");") : ("this(" + argus.join(",") + ");")));9
return r;10
};11
Function.prototype.call = function (obj) 12
{13
var argu = new Array();14
for (var i=1;i<arguments.length;i++)15
argu[i-1] = arguments[i];16
return this.apply(obj, argu);17
};18
Q：如何实现文件下载
A：
实现文件下载1
function DownURL(strRemoteURL,strLocalURL)2
{3
try4
{5
var xmlHTTP=new ActiveXObject("Microsoft.XMLHTTP");6
xmlHTTP.open("Get",strRemoteURL,false);7
xmlHTTP.send();8
var adodbStream=new ActiveXObject("ADODB.Stream");9
adodbStream.Type=1;//1=adTypeBinary10
adodbStream.Open();11
adodbStream.write(xmlHTTP.responseBody);12
adodbStream.SaveToFile(strLocalURL,2);13
adodbStream.Close();14
adodbStream=null;15
xmlHTTP=null;16
}17
catch(e)18
{19
window.confirm("下载URL出错!");20
}21
window.confirm("下载完成.");22
}Q：如何检查一个URL是否有效
A：
检查URL是否有效1
function getXML(URL)2
{3
var xmlhttp = new ActiveXObject("microsoft.xmlhttp");4
xmlhttp.Open("GET",URL, false);5
try6
{7
xmlhttp.Send();8
}9
catch(e){}10
finally11
{12
var result = xmlhttp.responseText;13
if(result)14
{15
if(xmlhttp.Status==200)16
{17
return(true);18
}19
else20
{21
return(false);22
}23
}24
else25
{26
return(false);27
}28
}29
}Q：如何实现用POST代替FORM
A：
用POST代替FORM1
<SCRIPT language="VBScript">2
Function URLEncoding(vstrIn)3
strReturn = ""4
For i = 1 To Len(vstrIn)5
ThisChr = Mid(vStrIn,i,1)6
If Abs(Asc(ThisChr)) < &HFF Then7
strReturn = strReturn & ThisChr8
Else9
innerCode = Asc(ThisChr)10
If innerCode < 0 Then11
innerCode = innerCode + &H1000012
End If13
Hight8 = (innerCode And &HFF00)\ &HFF14
Low8 = innerCode And &HFF15
strReturn = strReturn & "%" & Hex(Hight8) & "%" & Hex(Low8)16
End If17
Next18
URLEncoding = strReturn19
End Function20
21
Function bytes2BSTR(vIn)22
strReturn = ""23
For i = 1 To LenB(vIn)24
ThisCharCode = AscB(MidB(vIn,i,1))25
If ThisCharCode < &H80 Then26
strReturn = strReturn & Chr(ThisCharCode)27
Else28
NextCharCode = AscB(MidB(vIn,i+1,1))29
strReturn = strReturn & Chr(CLng(ThisCharCode) * &H100 + CInt(NextCharCode))30
i = i + 131
End If32
Next33
bytes2BSTR = strReturn34
End Function35
36
dim strA,oReq37
strA = URLEncoding("submit1=Submit&text1=中文")38
set oReq = CreateObject("MSXML2.XMLHTTP")39
oReq.open "POST","http://ServerName/VDir/TstResult.asp",false40
oReq.setRequestHeader "Content-Length",Len(strA)41
oReq.setRequestHeader "CONTENT-TYPE","application/x-www-form-urlencoded"42
oReq.send strA43
msgbox bytes2BSTR(oReq.responseBody)44
</SCRIPT>Q：如何用javascript 写服务器端连接数据库
A：
用javascript 写服务器端连接数据库的代码示例1
<script language="javascript">2
//用 javascript 写服务器端连接数据库的代码示例3
var conn = new ActiveXObject("ADODB.Connection");4
conn.Open("Provider=SQLOLEDB.1; Data Source=localhost; User ID=sa; Password=sa; Initial Catalog=MyTestDB");5
var rs = new ActiveXObject("ADODB.Recordset");6
var sql="select * from T_Memeber";7
rs.open(sql, conn);8
shtml = "<table width='100%' border=1>";9
shtml +="<tr bgcolor='#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>";10
while(!rs.EOF)11
{12
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>";13
rs.moveNext;14
}15
shtml += "</table>";16
document.write(shtml);17
rs.close();18
rs = null;19
conn.close();20
conn = null;21
</script>Q：如何使用数据岛(XML数据集合)
A：
使用XML数据岛1
<html>2
<body>3
srno：<input type=text datasrc=#xmldate DataFLD=srno size="76"><BR>4
times：<input type=text datasrc=#xmldate DataFLD=times size="76"><BR>5
<input id="first" TYPE=button value="<< 第一条记录" onclick="xmldate.recordset.moveFirst()">6
<input id="prev" TYPE=button value="<上一条记录" onclick="xmldate.recordset.movePrevious()">7
<input id="next" TYPE=button value="下一条记录>" onclick="xmldate.recordset.moveNext()">8
<input id="last" TYPE=button value="最后一条记录>>" onclick="xmldate.recordset.moveLast()">9
<input id="Add" TYPE=button value="添加新记录" onclick="xmldate.recordset.addNew()">10
11
<XML ID="xmldate">12
<infolist>13
<info ><srno>20041025-01</srno><times>null</times></info>14
<info ><srno>20041101-09</srno><times>2004年10月1日2点22分0秒</times></info>15
</infolist>16
</XML>17
</body>18
</html>Q：作一个可以编辑的下拉选单
A：
可编辑的下拉选单1
<input type=text name=re_name style="width:100px;height:21px;font-size:10pt;">2
<span style="width:18px;border:0px solid red;">3
<select name="r00" style="margin-left:-100px;width:118px; background-color:#FFEEEE;" onChange="document.all.re_name.value=this.value;">4
<option value="1">11111111<option>5
<option value="2">222222</option>6
<option value="3">333333</option>7
</select>8
</span>9
Q：如何使用JavaScript设置光标位置
A：
访问设定光标位置1
function getCaret(textbox)2
{3
var control = document.activeElement;4
textbox.focus();5
var rang = document.selection.createRange();6
rang.setEndPoint("StartToStart",textbox.createTextRange())7
control.focus();8
return rang.text.length;9
}10
function setCaret(textbox,pos)11
{12
try13
{14
var r =textbox.createTextRange();15
r.moveStart('character',pos);16
r.collapse(true);17
r.select();18
}19
catch(e)20
{}21
}22
function selectLength(textbox,start,len)23
{24
try25
{26
var r =textbox.createTextRange();27
28
r.moveEnd('character',len-(textbox.value.length-start));29
r.moveStart('character',start);30
31
r.select();32
}33
catch(e)34
{35
alert(e.description);36
}37
}38
function insertAtCaret(textbox,text)39
{40
textbox.focus();41
document.selection.createRange().text = text;42
}Q：如何实现页内查找
A：
页内查找1
function findInPage(str)2
{3
var txt, i, found,n = 0;4
if (str == "")5
{6
return false;7
}8
txt = document.body.createTextRange();9
for (i = 0; i <= n && (found = txt.findText(str)) != false; i++)10
{11
txt.moveStart("character", 1);12
txt.moveEnd("textedit");13
}14
if (found)15
{16
txt.moveStart("character", -1);17
txt.findText(str);18
txt.select();19
txt.scrollIntoView();20
n++;21
}22
else23
{24
if (n > 0)25
{26
n = 0;27
findInPage(str);28
}29
else30
{31
alert(str + " 您要找的文字不存在。\n \n请试着输入页面中的关键字再次查找！");32
}33
}34
return false;35
}Q：如何用JavaScript操作Excel
A：
操作Excel代码1
<script language="javascript">2
function jStartExcel() 3
{4
var xls = new ActiveXObject ( "Excel.Application" );5
xls.visible = true;6
var newBook = xls.Workbooks.Add;7
newBook.Worksheets.Add;8
newBook.Worksheets(1).Activate;9
xls.ActiveWorkBook.ActiveSheet.PageSetup.Orientation = 2;10
xls.ActiveWorkBook.ActiveSheet.PageSetup.PaperSize = 5;11
newBook.Worksheets(1).Columns("A").columnwidth=50;12
newBook.Worksheets(1).Columns("A").WrapText = true;13
newBook.Worksheets(1).Columns("B").columnwidth=50;14
newBook.Worksheets(1).Columns("B").WrapText = true;15
newBook.Worksheets(1).Range("A1:B1000").NumberFormat = "0";16
newBook.Worksheets(1).Range("A1:B1000").HorizontalAlignment = -4131;17
newBook.Worksheets(1).Cells(1,1).Interior.ColorIndex="15";18
newBook.Worksheets(1).Cells(1,1).value="First Column, First Cell";19
newBook.Worksheets(1).Cells(2,1).value="First Column, Second Cell";20
newBook.Worksheets(1).Cells(1,2).value="Second Column, First Cell";21
newBook.Worksheets(1).Cells(2,2).value="Second Column, Second Cell";22
newBook.Worksheets(1).Name="My First WorkSheet";23
}24
</script>Q：如何自定义提示条
A：
自定义提示条(tip)1
<a href="#" title="这是提示">tip</a>2
<script Language="javascript">3
//***********默认设置定义.*********************4
tPopWait=50;//停留tWait豪秒后显示提示。5
tPopShow=5000;//显示tShow豪秒后关闭提示6
showPopStep=20;7
popOpacity=99;8
//***************内部变量定义*****************9
sPop=null;10
curShow=null;11
tFadeOut=null;12
tFadeIn=null;13
tFadeWaiting=null;14
document.write("<style type='text/css'id='defaultPopStyle'>");15
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)}");16
document.write("</style>");17
document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>");18
19
function showPopupText()20
{21
var o=event.srcElement;22
MouseX=event.x;23
MouseY=event.y;24
if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};25
if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};26
if(o.dypop!=sPop) 27
{28
sPop=o.dypop;29
clearTimeout(curShow);30
clearTimeout(tFadeOut);31
clearTimeout(tFadeIn);32
clearTimeout(tFadeWaiting);33
if(sPop==null || sPop=="") 34
{35
dypopLayer.innerHTML="";36
dypopLayer.style.filter="Alpha()";37
dypopLayer.filters.Alpha.opacity=0;38
}39
else 40
{41
if(o.dyclass!=null) popStyle=o.dyclass42
else popStyle="cPopText";43
curShow=setTimeout("showIt()",tPopWait);44
}45
}46
}47
48
function showIt()49
{50
dypopLayer.className=popStyle;51
dypopLayer.innerHTML=sPop;52
popWidth=dypopLayer.clientWidth;53
popHeight=dypopLayer.clientHeight;54
if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-2455
else popLeftAdjust=0;56
if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-2457
else popTopAdjust=0;58
dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;59
dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;60
dypopLayer.style.filter="Alpha(Opacity=0)";61
fadeOut();62
}63
64
function fadeOut()65
{66
if(dypopLayer.filters.Alpha.opacity<popOpacity) 67
{68
dypopLayer.filters.Alpha.opacity+=showPopStep;69
tFadeOut=setTimeout("fadeOut()",1);70
}71
else 72
{73
dypopLayer.filters.Alpha.opacity=popOpacity;74
tFadeWaiting=setTimeout("fadeIn()",tPopShow);75
}76
}77
78
function fadeIn()79
{80
if(dypopLayer.filters.Alpha.opacity>0) 81
{82
dypopLayer.filters.Alpha.opacity-=1;83
tFadeIn=setTimeout("fadeIn()",1);84
}85
}86
document.onmouseover=showPopupText;87
</script>Q：如何插入文字
A：
插入文字1
document.onclick =function()2
{3
var oSource = window.event.srcElement;4
if(oSource.tagName!="DIV")5
return false;6
var sel = document.selection;7
if (sel!=null) 8
{9
var rng = sel.createRange();10
if (rng!=null)11
rng.pasteHTML("<font color=red>插入文字</font>");12
}13
}Q：判断键盘输入的键
A：
判断键盘输入1
<html>2
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">3
<head>4
<script language="javascript">5
var ie =navigator.appName=="Microsoft Internet Explorer"?true:false;6
7
function keyDown(e)8
{9
if(!ie)10
{11
var nkey=e.which;12
var iekey='现在是ns浏览器';13
var realkey=String.fromCharCode(e.which);14
}15
if(ie)16
{17
var iekey=event.keyCode;18
var nkey='现在是ie浏览器';19
var realkey=String.fromCharCode(event.keyCode);20
if(event.keyCode==32){realkey='\' 空格\''}21
if(event.keyCode==13){realkey='\' 回车\''}22
if(event.keyCode==27){realkey='\' Esc\''}23
if(event.keyCode==16){realkey='\' Shift\''}24
if(event.keyCode==17){realkey='\' Ctrl\''}25
if(event.keyCode==18){realkey='\' Alt\''}26
}27
alert('ns浏览器中键值:'+nkey+'\n'+'ie浏览器中键值:'+iekey+'\n'+'实际键为'+realkey);28
}29
document.onkeydown = keyDown;30
</script>31
</head>32
<body>33
<hr>34
<center>35
<h3>请按任意一个键。。。。</h3>36
</center>37
</body>38
</html>Q：如何让文本超出的时候自动显示省略号
A：
自动显示省略号1
<DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;overflow: hidden; text-overflow:ellipsis">2
<NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>3
</DIV>4
Q：检测Media Player版本
A：
检测MeidaPlayer版本1
<IE:clientCaps ID="oClientCaps" style="{behavior:url(#default#clientcaps)}" />2
<SCRIPT>3
var flash="";4
WMPVersion= oClientCaps.getComponentVersion("{22D6F312-B0F6-11D0-94AB-0080C74C7E95}","ComponentID");5
if (WMPVersion != "") 6
{7
flash = "";8
var version = WMPVersion.split(",");9
var i;10
for (i = 0; i < version.length; i++) 11
{12
if (i != 0)13
flash += ".";14
flash += version[i];15
}16
document.write("您的Windows Media Player 版本是:"+flash+"<p>");17
}18
</SCRIPT>Q：使图片按比例缩放显示
A：
使图片按比例缩放1
<script language="javascript">2
<!--3
var flag=false;4
function DrawImage(ImgD)5
{6
var image=new Image();7
var iwidth = 80; //定义允许图片宽度8
var iheight = 80; //定义允许图片高度9
image.src=ImgD.src;10
if(image.width>0 && image.height>0)11
{12
flag=true;13
if(image.width/image.height>= iwidth/iheight)14
{15
if(image.width>iwidth)16
{17
ImgD.width=iwidth;18
ImgD.height=(image.height*iwidth)/image.width;19
}20
else21
{22
ImgD.width=image.width;23
ImgD.height=image.height;24
}25
ImgD.alt=image.width+"×"+image.height;26
}27
else28
{29
if(image.height>iheight)30
{31
ImgD.height=iheight;32
ImgD.width=(image.width*iheight)/image.height;33
}34
else35
{36
ImgD.width=image.width;37
ImgD.height=image.height;38
}39
ImgD.alt=image.width+"×"+image.height;40
}41
}42
}43
//-->44
</script>45
<img src=".." onload = "DrawImage(this)">
Q：细线边框下拉选单
A：
细线下拉选单1
<span style="border:1px solid #000000; position:absolute; overflow:hidden;" >2
<select style="margin:-2px;">3
<option>1111</option>4
<option>2222</option>5
<option>3333</option>6
</select>7
</span>Q：如何使Window.Print()不打印页码和文件名
A:这个方法需要使用脚本来修改注册表，使用的过程中会跳出警告。是一个很头疼的问题，不过目前没有找到更好的解决办法。
Window.Print不打印页码和文件名1
<HTML><HEAD>2
<script language="JavaScript">3
var hkey_root,hkey_path,hkey_key4
hkey_root="HKEY_CURRENT_USER"5
hkey_path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\"6
//设置网页打印的页眉页脚为空7
function pagesetup_null(){8
try{9
var RegWsh = new ActiveXObject("WScript.Shell")10
hkey_key="header" 11
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"")12
hkey_key="footer"13
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"")14
}catch(e){}15
}16
//设置网页打印的页眉页脚为默认值17
function pagesetup_default(){18
try{19
var RegWsh = new ActiveXObject("WScript.Shell")20
hkey_key="header" 21
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"&w&b页码，&p/&P")22
hkey_key="footer"23
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"&u&b&d")24
}catch(e){}25
}26
</script>27
</HEAD>28
<BODY><br/><br/><br/><br/><br/><br/><p align=center>29
<input type="button" value="清空页码" onclick=pagesetup_null()>30
<input type="button" value="恢复页码" onclick=pagesetup_default()><br/>31
</p></BODY></HTML>
扫一扫
644
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
