分享Javascript中最常用的55個經典小技巧

作者：Eve Cole 更新時間：2025-01-17 19:12:01

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. <link rel="Shortcut Icon" href="favicon.ico"> IE網址列前換成自己的圖標

6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夾中顯示出你的圖標

7. <input style="ime-mode:disabled"> 關閉輸入法

8. 永遠都會帶著框架

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. 網頁將不能另存為

11. <input type=button value="/查看網頁原始碼

onclick="window.location = "view-source:"+ "//www.VeVB.COm"">

12.刪除時確認

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

複製代碼代碼如下:

//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

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. 遊標是停在文字方塊文字的最後

複製代碼代碼如下:

function cc()

{

var e = event.srcElement;

var r =e.createTextRange();

r.moveStart("character",e.value.length);

r.collapse(true);

r.select();

}

</script>

15. 判斷上一頁的來源

javascript :

document.referrer

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

本例適用於IE

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

function look(){

if(event.shiftKey)

alert("禁止按Shift鍵!"); //可以換成ALT CTRL

}

document.onkeydown=look;

</script>

18. 網頁不會被緩存

或<META HTTP-EQUIV="expires" CONTENT="0">

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

或

<input type=text style="border-left:none; border-right:none; border-top:none; border-bottom:

1 solid #000000"></textarea>

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

<div>(division)用來定義大段的頁面元素，會產生轉行

<span>用來定義同一行內的元素，跟<div>的唯一差別是不產生轉行

<layer>是ns的標記，ie不支持，相當於<div>

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

22.不要滾動條?

讓豎條沒有:

</body>

讓橫條沒有:

</body>

兩個都去掉？更簡單了

</body>

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

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

<form name="form1" method="post" action=mailto:****@***.com

enctype="text/plain">

</form>

25.在開啟的子視窗刷新父視窗的程式碼裡如何寫？

window.opener.location.reload()

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

開啟頁面的位置<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. 檢查一段字串是否全由數字組成

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. 日期減去天數等於第二個日期

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

function checkme()

for each ob in radio1

if ob.checked then

window.alert ob.value

end function

</script><BODY>

<INPUT name="radio1" type="radio" value="/style" checked>Style

<INPUT name="radio1" type="radio" value="/blog/barcode">Barcode

</BODY></HTML>

34.腳本永不出錯

<!-- Hide

function killErrors() {

return true;

}

window.onerror = killErrors;

// -->

</SCRIPT>

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

36. 偵測某個網站的連結速度：

把如下程式碼加入<body>區域中:

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:

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種隨機選擇一種

39.在規定時間內跳轉

40.網頁是否被檢索

其中屬性值有以下一些:

屬性值為"all": 檔案將會被檢索，且頁上連結可被查詢；

屬性值為"none": 檔案不被檢索，也不查詢頁上的連結；

屬性值為"index": 檔案將會被檢索；

屬性值為"follow": 查詢頁上的連結；

屬性值為"noindex": 檔案不檢索，但可被查詢連結；

屬性值為"nofollow": 檔案不會被檢索，但可查詢頁上的連結。

41、email位址的分割

把如下程式碼加入<body>區域中

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

42.流動邊框效果的表格

把如下程式碼加入<body>區域中

複製代碼代碼如下:

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><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主頁彈出視窗技巧

視窗中間彈出

複製代碼代碼如下:

window.open("//www.VeVB.COm","","width=400,height=240,top="+(screen.availHeight-240)/2+",left="+(screen.availWidth -400)/2);

</script>

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

<html>

<head>

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>

</form>

</body>

</html>

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

一、在下面的程式碼中，你只要點擊打開一個窗口，即可連結到賽迪網。而當你想關閉時，只要點擊一下即可關閉剛才開啟的視窗。

程式碼如下：

複製代碼代碼如下:

<！ --

function openclk() {

another=open('1000){this.resized=true;this.style.width=1000;}" align=absMiddle border=0>//www.VeVB.COm'，'NewWindow');

}

function closeclk() {

another.close();

}

//-->

</SCRIPT>

<FORM>

<BR>

</FORM>

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

程式碼如下：

複製代碼代碼如下:

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>

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

代碼如下:

複製代碼代碼如下:

<！ -- 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 = "//www.VeVB.COm";

popup = window.open(URL，"MenuPopup"，windowprops);

}

// End -->

</script>

<table>

<tr>

<td>

<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>

<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>區域中

複製代碼代碼如下:

<!-- 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、顯示個人客戶端機器的日期和時間

複製代碼代碼如下:

<!-- 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:

<!-- hide script from old browsers

***(document.lastModified)

// end hiding contents -->

</script>

</body>

</html>

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

複製代碼代碼如下:

<html>

<head>

<!-- 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>

Enter your name:<br>

<P>

Enter your e-mail address:<br>

</body>

48、跑馬燈

複製代碼代碼如下:

<html>

<head>

<!-- 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>

</html>

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

複製代碼代碼如下:

<html>

<body>

</FORM>

</body>

</html>

50、查看某網址的源碼

把如下程式碼加入<body>區域中

複製代碼代碼如下:

function add()

{

var ress=document.forms[0].luxiaoqing.value

window.location="view-source:"+ress;

}

</SCRIPT>

輸入要查看原始碼的URL位址:

複製代碼代碼如下:

</FORM>

51、title顯示日期

把如下程式碼加入<body>區域中:

複製代碼代碼如下:

<!--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>區域中

複製代碼代碼如下:

<!--

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>

53.回車鍵換行

把如下程式碼加入<body>區域中

複製代碼代碼如下:

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>

<textarea>回車換行

54、確認後提交

把如下程式碼加入<body>區域中

複製代碼代碼如下:

<!--

function msg(){

if (confirm("你確認要提交嘛！"))

document.lnman.submit()

}

//-->

</SCRIPT>

<p>

</p>

<p>

</p>

</form>

55、改變表格的內容

把如下程式碼加入<body>區域中

複製代碼代碼如下:

var arr=new Array()

arr[0]="一一一一一";

arr[1]="二二二二二";

arr[2]="三三三三三";

</script>

<option value=a>改變第一格</option>

<option value=a>改變第二格</option>

<option value=a>改變第三格</option>

</select>

</tr>

</table>