【前端】javaScript 常用技巧總結

javaScript 常用技巧總結 1. 徹底屏蔽滑鼠右鍵 2. 取消選取、防止複製 3. 不准粘貼 4. 防止複製 5. IE地址欄前換成自己的圖標 6. 可以在收藏夾中顯示出你的圖標 7. 關閉輸入法 8. 永遠都會帶著框架 9. 防止被人frame 10. 網頁將不能被另存為 11. 查看網頁 ...

javaScript 常用技巧總結

1. 徹底屏蔽滑鼠右鍵

oncontextmenu="window.event.returnValue=false" 
<table border oncontextmenu=return(false)><td>no</table> 可用於Table

2. 取消選取、防止複製

<body onselectstart="return false">

3. 不准粘貼

onpaste="return false"

4. 防止複製

oncopy="return false;" oncut="return false;"

5. IE地址欄前換成自己的圖標

<link rel="Shortcut Icon" href="favicon.ico">

6. 可以在收藏夾中顯示出你的圖標

<link rel="Bookmark" href="favicon.ico">

7. 關閉輸入法

<input style="ime-mode:disabled">

8. 永遠都會帶著框架

<script language="JavaScript"><!--
if (window == top)top.location.href = "frames.htm"; //frames.htm為框架網頁
// --></script>

9. 防止被人frame

<SCRIPT LANGUAGE=JAVASCRIPT><!-- 
if (top.location != self.location)top.location=self.location;
// --></SCRIPT>

10. 網頁將不能被另存為

<noscript><*** src="/*.html>";</***></noscript>

11. 查看網頁源代碼

<input type=button value="/
onclick="window.location = "view-source:"+ "http://www.pconline.com.cn"">

12.刪除時確認

<a href=""javascript :if(confirm("確實要刪除嗎?"))location="boos.asp?&areyou=刪除&page=1"">刪除</a>

13. 取得控制項的絕對位置

//Javascript
<script language="Javascript">
function getIE(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
alert("top="+t+"/nleft="+l);
}
</script>
//VBScript
<script language="VBScript"><!--
function getIE()
dim t,l,a,b
set a=document.all.img1
t=document.all.img1.offsetTop
l=document.all.img1.offsetLeft
while a.tagName<>"BODY"
set a = a.offsetParent
t=t+a.offsetTop
l=l+a.offsetLeft
wend
msgbox "top="&t&chr(13)&"left="&l,64,"得到控制項的位置"
end function
--></script>

14. 游標是停在文本框文字的最後

<script language="javascript">
function cc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart("character",e.value.length);
r.collapse(true);
r.select();
}
</script>
<input type=text name=text1 value="123" onfocus="cc()">

15. 判斷上一頁的來源

javascript :
document.referrer

16. 最小化、最大化、關閉視窗

<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> 
<param name="Command" value="Minimize"></object>
<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> 
<param name="Command" value="Maximize"></object>
<OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM NAME="Command" value="/Close"></OBJECT>
<input type=button value="/最小化 onclick=hh1.Click()>
<input type=button value="/blog/最大化 onclick=hh2.Click()>
<input type=button value=關閉 onclick=hh3.Click()>
本例適用於IE

17.屏蔽功能鍵Shift,Alt,Ctrl

<script>
function look(){ 
if(event.shiftKey) 
alert("禁止按Shift鍵!"); //可以換成ALT　CTRL
} 
document.onkeydown=look; 
</script>

18. 網頁不會被緩存

<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
或者<META HTTP-EQUIV="expires" CONTENT="0">

19. 怎樣讓表單沒有凹凸感？

<input type=text style="""border:1 solid #000000"> 
或
<input type=text style="border-left:none; border-right:none; border-top:none; border-bottom: 
solid #000000"></textarea>

20. <div><span>&<layer>的區別？

<div>(division)用來定義大段的頁面元素，會產生轉行 
<span>用來定義同一行內的元素，跟<div>的唯一區別是不產生轉行 
<layer>是ns的標記，ie不支持，相當於<div>

21. 讓彈出視窗總是在最上面:

<body onblur="this.focus();">

22. 不要滾動條?
讓豎條沒有:

<body style="overflow:scroll;overflow-y:hidden"> 
</body>

讓橫條沒有:

<body style="overflow:scroll;overflow-x:hidden"> 
</body>

兩個都去掉？更簡單了

<body scroll="no"> 
</body>

23.怎樣去掉圖片鏈接點擊後，圖片周圍的虛線？

<a href="#" onFocus="this.blur()"><img src="/logo.jpg" border=0></a>

24.電子郵件處理提交表單

<form name="form1" method="post" action=mailto:****@***.com 
enctype="text/plain"> 
<input type=submit>
</form>

25.在打開的子視窗刷新父視窗的代碼里如何寫？

window.opener.location.reload()

26.如何設定打開頁面的大小

<body onload="top.resizeTo(300,200);">
打開頁面的位置<body onload="top.moveBy(300,200);">

27.在頁面中如何加入不是滿鋪的背景圖片,拉動頁面時背景圖不動

<STYLE> 
body 
{background-image:url(/logo.gif); background-repeat:no-repeat; 
background-position:center;background-attachment: fixed} 
</STYLE>

28. 檢查一段字元串是否全由數字組成

<script language="Javascript"><!--
function checkNum(str){return str.match(//D/)==null}
alert(checkNum("1232142141"))
alert(checkNum("123214214a1"))
// --></script>

29. 獲得一個視窗的大小

document.body.clientWidth; document.body.clientHeight

30. 怎麼判斷是否是字元

if (/[^/x00-/xff]/g.test(s)) alert("含有漢字");
else alert("全是字元");

31. TEXTAREA自適應文字行數的多少

<textarea rows=1 name=s1 cols=27 onpropertychange
="this.style.posHeight=this.scrollHeight">
</textarea>

32. 日期減去天數等於第二個日期

<script language=Javascript>
function cc(dd,dadd)
{
//可以加上錯誤處理
var a = new Date(dd)
a = a.valueOf()
a = a - dadd * 24 * 60 * 60 * 1000
a = new Date(a)
alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")
}
cc("12/23/2002",2)
</script>

33. 選擇了哪一個Radio

<HTML><script language="vbscript">
function checkme()
for each ob in radio1
if ob.checked then 
window.alert ob.value
next
end function
</script><BODY>
<INPUT name="radio1" type="radio" value="/style" checked>Style
<INPUT name="radio1" type="radio" value="/blog/barcode">Barcode
<INPUT type="button" value="check" onclick="checkme()">
</BODY></HTML>

34. 腳本永不出錯

<SCRIPT LANGUAGE="JavaScript"> 
<!-- Hide 
function killErrors() { 
return true; 
} 
window.onerror = killErrors; 
// --> 
</SCRIPT>

35. ENTER鍵可以讓游標移到下一個輸入框

<input onkeydown="if(event.keyCode==13)event.keyCode=9">

36. 檢測某個網站的鏈接速度：
把如下代碼加入<body>區域中:

<script language=Javascript>
tim=1
setInterval("tim++",100)
b=1
var autourl=new Array()
autourl[1]=1000){this.resized=true;this.style.width=1000;}" align=absMiddle border=0>www.njcatv.net"
autourl[2]="javacool.3322.net"
autourl[3]=1000){this.resized=true;this.style.width=1000;}" align=absMiddle border=0>www.sina.com.cn"
autourl[4]="www.nuaa.edu.cn"
autourl[5]=1000){this.resized=true;this.style.width=1000;}" align=absMiddle border=0>www.cctv.com"
function butt(){
***("<form name=autof>")
for(var i=1;i<autourl.length;i++)
***("<input type=text name=txt"+i+" size=10 value="/測試中……> =》<input type=text 
name=url"+i+" size=40> =》<input type=button value="/blog/GO 
onclick=window.open(this.form.url"+i+".value)><br>")
***("<input type=submit value=刷新></form>")
}
butt()
function auto(url){
document.forms[0]["url"+b].value=url
if(tim>200)
{document.forms[0]["txt"+b].value="/鏈接超時"}
else
{document.forms[0]["txt"+b].value="/blog/時間"+tim/10+"秒"}
b++
}
function run(){for(var i=1;i<autourl.length;i++)***("<img src=http://"+autourl+"/"+Math.random()+" width=1 height=1 
onerror=auto("http://"+autourl+"")>")}
run()</script>

37. 各種樣式的游標

auto ：標準游標
default ：標準箭頭
hand ：手形游標
wait ：等待游標
text ：I形游標
vertical-text ：水平I形游標
no-drop ：不可拖動游標
not-allowed ：無效游標
help ：?幫助游標
all-scroll ：三角方向標
move ：移動標
crosshair ：十字標
e-resize
n-resize
nw-resize
w-resize
s-resize
se-resize
sw-resize

38. 頁面進入和退出的特效

進入頁面<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:
矩形縮小 
矩形擴大 
圓形縮小
圓形擴大 
下到上刷新 
上到下刷新
左到右刷新 
右到左刷新 
豎百葉窗
橫百葉窗 
錯位橫百葉窗 
錯位豎百葉窗
點擴散 
左右到中間刷新 
中間到左右刷新
中間到上下
上下到中間 
右下到左上
右上到左下 
左上到右下 
左下到右上
橫條 
豎條 
以上22種隨機選擇一種

39. 在規定時間內跳轉

<META http-equiv=V="REFRESH" content="5;URL=http://www.51js.com">

40.網頁是否被檢索

<meta name="ROBOTS" content="屬性值">
　　其中屬性值有以下一些:
　　屬性值為"all": 文件將被檢索，且頁上鏈接可被查詢；
　　屬性值為"none": 文件不被檢索，而且不查詢頁上的鏈接；
　　屬性值為"index": 文件將被檢索；
　　屬性值為"follow": 查詢頁上的鏈接；
　　屬性值為"noindex": 文件不檢索，但可被查詢鏈接；
　　屬性值為"nofollow": 文件不被檢索，但可查詢頁上的鏈接。

41. email地址的分割
把如下代碼加入<body>區域中

<a href="mailto:[email protected]">[email protected]</a>

42. 流動邊框效果的表格

把如下代碼加入<body>區域中
<SCRIPT>
l=Array(6,7,8,9,'a','b','b','c','d','e','f')
Nx=5;Ny=35
t="<table border=0 cellspacing=0 cellpadding=0 height="+((Nx+2)*16)+"><tr>"
for(x=Nx;x<Nx+Ny;x++)
t+="<td width=16 id=a_mo"+x+">　</td>"
t+="</tr><tr><td width=10 id=a_mo"+(Nx-1)+">　</td><td colspan="+(Ny-2)+" rowspan="+(Nx)+">　</td><td width=16 id=a_mo"+(Nx+Ny)+"></td></tr>"
for(x=2;x<=Nx;x++)
t+="<tr><td width=16 id=a_mo"+(Nx-x)+">　</td><td width=16 id=a_mo"+(Ny+Nx+x-1)+">　</td></tr>"
t+="<tr>"
for(x=Ny;x>0;x--)
t+="<td width=16 id=a_mo"+(x+Nx*2+Ny-1)+">　</td>"
***(t+"</tr></table>")
var N=Nx*2+Ny*2
function f1(y){
for(i=0;i<N;i++){
c=(i+y)%20;if(c>10)c=20-c
document.all["a_mo"+(i)].bgColor=""""#0000"+l[c]+l[c]+"'"}
y++
setTimeout('f1('+y+')','1')}
f1(1)
</SCRIPT>

43. JavaScript主頁彈出視窗技巧
視窗中間彈出

<script>
window.open("http://www.cctv.com","","width=400,height=240,top="+(screen.availHeight-240)/2+",left="+(screen.availWidth-400)/2);
</script>
============
<html>
<head>
<script language="LiveScript">
function WinOpen() {
msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no");
msg.***("<HEAD><TITLE>哈 羅!</TITLE></HEAD>");
msg.***("<CENTER><H1>酷 斃 了!</H1><h2>這 是<B>JavaScript</B>所 開 的 視 窗!</h2></CENTER>");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Push me" onclick="WinOpen()">
</form>
</body>
</html>
==============

一、在下麵的代碼中，你只要單擊打開一個視窗，即可鏈接到賽迪網。而當你想關閉時，只要單擊一下即可關閉剛纔打開的視窗。
　　代碼如下：

<SCRIPT language="JavaScript"> 
　　<！-- 
　　function openclk() { 
　　another=open('1000){this.resized=true;this.style.width=1000;}" align=absMiddle border=0>http://www.ccidnet.com'，'NewWindow'); 
　　} 
　　function closeclk() { 
　　another.close(); 
　　} 
　　//--> 
　　</SCRIPT> 
　　<FORM> 
　　<INPUT TYPE="BUTTON" NAME="open" value="/打開一個視窗" onClick="openclk()"> 
　　<BR> 
　　<INPUT TYPE="BUTTON" NAME="close" value="/blog/關閉這個視窗" onClick="closeclk()"> 
　　</FORM>

二、上面的代碼也太靜了，為何不來點動感呢？如果能給頁面來個降落效果那該多好啊！
　　代碼如下：

<script> 
　　function drop(n) { 
　　if(self.moveBy){ 
　　self.moveBy (0，-900); 
　　for(i = n; i > 0; i--){ 
　　self.moveBy(0，3); 
　　} 
　　for(j = 8; j > 0; j--){ 
　　self.moveBy(0，j); 
　　self.moveBy(j，0); 
　　self.moveBy(0，-j); 
　　self.moveBy(-j，0); 
　　} 
　　} 
　　} 
　　</script> 
　　<body onLoad="drop(300)">

三、討厭很多網站總是按照預設視窗打開，如果你能隨心所欲控制打開的視窗那該多好。

代碼如下:

<SCRIPT LANGUAGE="JavaScript"> 
　　<！-- Begin 
　　function popupPage(l， t， w， h) { 
　　var windowprops = "location=no，scrollbars=no，menubars=no，toolbars=no，resizable=yes" + 
　　"，left=" + l + "，top=" + t + "，width=" + w + "，height=" + h; 
　　var URL = "http://www.80cn.com"; 
　　popup = window.open(URL，"MenuPopup"，windowprops); 
　　} 
　　// End --> 
　　</script> 
　　<table> 
　　<tr> 
　　<td> 
　　<form name=popupform> 
　　<pre> 
　　打開頁面的參數<br> 
　　離開左邊的距離: <input type=text name=left size=2 maxlength=4> pixels 
　　離開右邊的距離: <input type=text name=top size=2 maxlength=4> pixels 
　　視窗的寬度: <input type=text name=width size=2 maxlength=4> pixels 
　　視窗的高度: <input type=text name=height size=2 maxlength=4> pixels 
　　</pre> 
　　<center> 
　　<input type=button value="打開這個視窗！" onClick="popupPage(this.form.left.value， this.form.top.value， this.form.width.value，
this.form.height.value)"> 
　　</center> 
　　</form> 
　　</td> 
　　</tr> 
　　</table>你只要在相對應的對話框中輸入一個數值即可，將要打開的頁面的視窗控制得很好。

44. 頁面的打開移動
把如下代碼加入<body>區域中

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
for (t = 2; t > 0; t--) {
for (x = 20; x > 0; x--) {
for (y = 10; y > 0; y--) {
parent.moveBy(0,-x);
}
}
for (x = 20; x > 0; x--) {
for (y = 10; y > 0; y--) {
parent.moveBy(0,x);
}
}
for (x = 20; x > 0; x--) {
for (y = 10; y > 0; y--) {
parent.moveBy(x,0);
}
}
for (x = 20; x > 0; x--) {
for (y = 10; y > 0; y--) {
parent.moveBy(-x,0);
}
} 
}
//-->
// End -->
</script>

45. 顯示個人客戶端機器的日期和時間

<script language="LiveScript">
<!-- Hiding
today = new Date()
***("現 在 時 間 是： ",today.getHours(),":",today.getMinutes())
***("<br>今 天 日 期 為： ", today.getMonth()+1,"/",today.getDate(),"/",today.getYear());
// end hiding contents -->
</script>

46. 自動的為你每次產生最後修改的日期了：

<html>
<body>
This is a simple HTML- page.
<br>
Last changes:
<script language="LiveScript">
<!-- hide script from old browsers
***(document.lastModified)
// end hiding contents -->
</script>
</body>
</html>

47. 不能為空和郵件地址的約束：

<html>
<head>
<script language="JavaScript">
<!-- Hide
function test1(form) {
if (form.text1.value == "")
alert("您 沒 寫 上 任 何 東 西， 請 再 輸 入 一 次 !")
else { 
alert("嗨 "+form.text1.value+"! 您 已 輸 入 完 成 !");
}
}
function test2(form) {
if (form.text2.value == "" || 
form.text2.value.indexOf('@', 0) == -1) 
alert("這 不 是 正 確 的 e-mail address! 請 再 輸 入 一 次 !");
else alert("您 已 輸 入 完 成 !");
}
// -->
</script>
</head>
<body>
<form name="first">
Enter your name:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="輸 入 測 試" onClick="test1(this.form)">
<P>
Enter your e-mail address:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="輸 入 測 試" onClick="test2(this.form)">
</body>

48. 跑馬燈

<html>
<head>
<script language="JavaScript">
<!-- Hide
var scrtxt="怎麼樣 ! 很酷吧 ! 您也可以試試."+"Here goes your message the visitors to your 
page will "+"look at for hours in pure fascination...";
var lentxt=scrtxt.length;
var width=100;
var pos=1-width;
function scroll() {
pos++;
var scroller="";
if (pos==lentxt) {
pos=1-width;
}
if (pos<0) {
for (var i=1; i<=Math.abs(pos); i++) {
scroller=scroller+" ";}
scroller=scroller+scrtxt.substring(0,width-i+1);
}
else {
scroller=scroller+scrtxt.substring(pos,width+pos);
}
window.status = scroller;
setTimeout("scroll()",150);
}
//-->
</script>
</head>
<body onLoad="scroll();return true;">
這裡可顯示您的網頁 !
</body>
</html>

49. 在網頁中用按鈕來控制前頁，後頁和主頁的顯示。

<html>
<body>
<FORM NAME="buttonbar">
<INPUT TYPE="button" VALUE="Back" onClick="history.back()">
<INPUT TYPE="button" VALUE="JS- Home" onClick="location='script.html'">
<INPUT TYPE="button" VALUE="Next" onCLick="history.forward()">
</FORM>
</body>
</html>

50. 查看某網址的源代碼
把如下代碼加入<body>區域中

<SCRIPT>
function add()
{
var ress=document.forms[0].luxiaoqing.value
window.location="view-source:"+ress;
}
</SCRIPT>

輸入要查看源代碼的URL地址:

<FORM><input type="text" name="luxiaoqing" size=40 value="http://"></FORM>
<FORM><br>
<INPUT type="button" value="查看源代碼" onClick=add()>
</FORM>

51. title顯示日期
把如下代碼加入<body>區域中:

<script language="JavaScript1.2">
<!--hide
var isnMonth = new
Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
var isnDay = new
Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六","星期日");
today = new Date () ;
Year=today.getYear();
Date=today.getDate();
if (document.all)
document.title="今天是: "+Year+"年"+isnMonth[today.getMonth()]+Date+"日"+isnDay[today.getDay()]
//--hide-->
</script>

52. 顯示所有鏈接
把如下代碼加入<body>區域中

<script language="JavaScript1.2">
<!--
function extractlinks(){
var links=document.all.tags("A")
var total=links.length
var win2=window.open("","","menubar,scrollbars,toolbar")
win2.***("<font size='2'>一共有"+total+"個連接</font><br>")
for (i=0;i<total;i++){
win2.***("<font size='2'>"+links[i].outerHTML+"</font><br>")
}
}
//-->
</script>
<input type="button" onClick="extractlinks()" value="顯示所有的連接">

53. 回車鍵換行
把如下代碼加入<body>區域中

<script type="text/javascript"> 
function handleEnter (field, event) {
var keyCode = event.keyCode ? event.keyCode : event.which ?
event.which : event.charCode;
if (keyCode == 13) {
var i;
for (i = 0; i < field.form.elements.length; i++)
if (field == field.form.elements[i])
break;
i = (i + 1) % field.form.elements.length;
field.form.elements[i].focus();
return false;
} 
else
return true;
} 
</script>
<form>
<input type="text" onkeypress="return handleEnter(this, event)"><br>
<input type="text" onkeypress="return handleEnter(this, event)"><br>
<textarea>回車換行

54. 確認後提交
把如下代碼加入<body>區域中

<SCRIPT LANGUAGE="JavaScript">
<!--
function msg(){
if (confirm("你確認要提交嘛！"))
document.lnman.submit()
}
//-->
</SCRIPT>
<form name="lnman" method="post" action="">
<p>
<input type="text" name="textfield" value="確認後提交">
</p>
<p>
<input type="button" name="Submit" value="提交" onclick="msg();">
</p>
</form>

55. 改變表格的內容
把如下代碼加入<body>區域中

<script ***script>
var arr=new Array()
arr[0]="一一一一一";
arr[1]="二二二二二";
arr[2]="三三三三三";
</script>
<select onchange="zz.cells[this.selectedIndex].innerHTML=arr[this.selectedIndex]">
<option value=a>改變第一格</option>
<option value=a>改變第二格</option>
<option value=a>改變第三格</option>
</select>
<table id=zz border=1>
<tr height=20>
<td width=150>第一格</td>
<td width=150>第二格</td>
<td width=150>第三格</td>
</tr>
</table>