1.?? οncοntextmenu="window.event.returnValue=false"?? 將徹底屏蔽鼠標右鍵??
? <table?? border?? οncοntextmenu=return(false)><td>no</table>?? 可用于Table??
???
? 2.?? <body?? onselectstart="return?? false">?? 取消選取、防止復制??
???
? 3.?? οnpaste="return?? false"?? 不準粘貼??
???
? 4.?? οncοpy="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.?? 永遠都會帶著框架??
? <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><iframe?? src="/blog/*.html>";</iframe></noscript>????
???
? 11.?? <input?? type=button?? value=查看網頁源代碼????
? οnclick="window.location?? =?? "view-source:"+?? "http://www.williamlong.info"">??
???
? 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)??
? 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"?? οnfοcus="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=最小化?? οnclick=hh1.Click()>??
? <input?? type=button?? value=最大化?? οnclick=hh2.Click()>??
? <input?? type=button?? value=關閉?? οnclick=hh3.Click()>??
? 本例適用于IE??
???
? 17.屏蔽功能鍵Shift,Alt,Ctrl??
? <script>??
? function?? look(){????
? if(event.shiftKey)????
? alert("禁止按Shift鍵!");?? //可以換成ALT　CTRL??
? }????
? document.οnkeydοwn=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:????
???
? 1?? solid?? #000000"></textarea>??
???
? 20.<div><span>&<layer>的區別？????
? <div>(division)用來定義大段的頁面元素，會產生轉行????
? <span>用來定義同一行內的元素，跟<div>的唯一區別是不產生轉行????
? <layer>是ns的標記，ie不支持，相當于<div>??
???
? 21.讓彈出窗口總是在最上面:??
? <body?? οnblur="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="/blog/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?? οnlοad="top.resizeTo(300,200);">??
? 打開頁面的位置<body?? οnlοad="top.moveBy(300,200);">??
???
? 27.在頁面中如何加入不是滿鋪的背景圖片,拉動頁面時背景圖不動????
? <STYLE>????
? body????
? {background-p_w_picpath:url(/blog/logo.gif);?? background-repeat:no-repeat;????
? background-position:center;background-p_w_upload:?? 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="barcode">Barcode??
? <INPUT?? type="button"?? value="check"??
? </BODY></HTML>??
???
? 34.腳本永不出錯??
? <SCRIPT?? LANGUAGE="JavaScript">????
? <!--?? Hide????
? function?? killErrors()?? {????
? return?? true;????
? }????
? window.onerror?? =?? killErrors;????
? //?? -->????
? </SCRIPT>??
???
? 35.ENTER鍵可以讓光標移到下一個輸入框??
? <input?? οnkeydοwn="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]="www.njcatv.net"??
? autourl[2]="javacool.3322.net"??
? autourl[3]="www.sina.com.cn"??
? autourl[4]="www.nuaa.edu.cn"??
? autourl[5]="www.cctv.com"??
? function?? butt(){??
? document.write("<form?? name=autof>")??
? for(var?? i=1;i<autourl.length;i++)??
? document.write("<input?? type=text?? name=txt"+i+"?? size=10?? value="/blog/測試中......>"?? =》<input?? type=text????
? name=url"+i+"?? size=40>?? =》<input?? type=button?? value=GO????
???
? οnclick=window.open(this.form.url"+i+".value)><br>")??
? document.write("<input?? type=submit?? value=刷新></form>")??
? }??
? butt()??
? function?? auto(url)??
? else??
???
? b++??
? }??
? function?? run(){for(var?? i=1;i<autourl.length;i++)document.write("<img?? src=http://"+autourl+"/"+Math.random()+"?? width=1?? height=1????
???
? οnerrοr=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.在規定時間內跳轉??
? <META?? http-equiv=V="REFRESH"?? content="5;URL=http://www.williamlong.info">????
???
? 40.網頁是否被檢索??
? <meta?? name="ROBOTS"?? content="屬性值">??
? 　　其中屬性值有以下一些:??
? 　　屬性值為"all":?? 文件將被檢索，且頁上鏈接可被查詢；??
? 　　屬性值為"none":?? 文件不被檢索，而且不查詢頁上的鏈接；??
? 　　屬性值為"index":?? 文件將被檢索；??
? 　　屬性值為"follow":?? 查詢頁上的鏈接；??
? 　　屬性值為"noindex":?? 文件不檢索，但可被查詢鏈接；??
? 　　屬性值為"nofollow":?? 文件不被檢索，但可查詢頁上的鏈接。??
???
? 最大化窗口？??
? <script?? language="JavaScript">??
? <!--??
? self.moveTo(0,0)??
? self.resizeTo(screen.availWidth,screen.availHeight)??
? //-->??
? </script>??
???
?????
???
???
? 解決問題：由于層與下拉框之間的優先級是：下拉框?? >?? 層，因此在顯示的時候，會因為優先級的次序而會出現如上問題。（如果幾個元素都是層的話，我們可以通過層的?? z-index?? 屬性來設置）解決辦法就是：給層中放一個優先級比下拉框更高的元素（iframe），從而解決此問題！具體解決代碼如下：??
???
? <div?? id="menu"?? style="position:absolute;?? visibility:hidden;?? top:20px;?? left:20px;?? width:100px;?? height:200px;?? background-color:#6699cc;">??
? <table>??
????? <tr><td>item?? 1</td></tr>??
????? <tr><td>item?? 2</td></tr>??
????? <tr><td>item?? 3</td></tr>??
????? <tr><td>item?? 4</td></tr>??
????? <tr><td>item?? 5</td></tr>??
????? </table>??
????? <iframe?? src="/blog/javascript:false"?? style="position:absolute;?? visibility:inherit;?? top:0px;?? left:0px;?? width:100px;?? height:200px;?? z-index:-1;?? filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>??
? </div>??
???
? <a?? href="#"?? οnclick="document.getElementById('menu').style.visibility='visible'">menu</a>??
???
? <form>??
????? <select><option>A?? form?? selection?? list</option></select>??
? </form>??
???
? 輸入框也可以做的很漂亮了??
? <div?? align="center"><input?? type="hidden"?? name="hao"?? value="yes">??
????????????????????????????? 外向數：<input????
????????????? name=answer????
????????????? style="color:?? rgb(255,0,0);?? border-left:?? medium?? none;?? border-right:?? medium?? none;?? border-top:?? medium?? none;?? border-bottom:?? 1px?? solid?? rgb(192,192,192)">??
????????????????????????? 　沒回答的題數：<input????
????????????? name=unanswer?? id="unanswer"????
????????????? style="color:?? rgb(255,0,0);?? border-left:?? medium?? none;?? border-right:?? medium?? none;?? border-top:?? medium?? none;?? border-bottom:?? 1px?? solid?? rgb(192,192,192)">??
????????????????????????? <br>??
????????????????????????? 總得分:??
????????????????????????? <input????
????????????? name=score?? id="score"????
????????????? style="color:?? rgb(255,0,0);?? border-left:?? medium?? none;?? border-right:?? medium?? none;?? border-top:?? medium?? none;?? border-bottom:?? 1px?? solid?? rgb(192,192,192)">??
????????????????????????? 　結　　　　論:??
????????????????????????? <input????
????????????? name=xgjg?? id="xgjg"????
????????????? style="color:?? rgb(255,0,0);?? border-left:?? medium?? none;?? border-right:?? medium?? none;?? border-top:?? medium?? none;?? border-bottom:?? 1px?? solid?? rgb(192,192,192)">??
????????????????????????? <br>??
????????????????????????? <br>????
???????????????????????????
????????????????????????? <input?? onClick=processForm(this.form)?? style="FONT-FAMILY:?? 宋體;?? FONT-SIZE:?? 9pt"?? type=button?? value=查看結果?? name="button">????
??????????????????????????? <input?? type="reset"?? name="Submit"?? value="重做">??
????????????????????????? </div>??
? 注意：修改<body>為<body?? οnlοad="max.Click()">即為打開最大??
???
? 化窗口，而如果改為<body?? οnlοad="min.Click()">就變為窗口一打開就最小化??
???
? <object?? id="min"?? type="application/x-oleobject"?? classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">??
????????????????????????? <param?? name="Command"?? value="Minimize">??
????????????????????? </object>?? <object?? id="max"?? type="application/x-oleobject"?? classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">??
????????????????????????? <param?? name="Command"?? value="Maximize">??
????????????????????? </object>??
? </body>??
???
? 頁面自動刷新（說明）??
???
? 當你做網頁時，是不是有的時候想讓你的網頁自動不停刷新，或者過一段時間自動跳轉到另外一個你自己設定的頁面？其實實現這個效果非常地簡單，而且這個效果甚至不能稱之為特效。你只要把如下代碼加入你的網頁中就可以了。??
???
? 1，頁面自動刷新：把如下代碼加入<head>區域中<meta?? http-equiv="refresh"?? content="20">,其中20指每隔20秒刷新一次頁面.??
???
? 2，頁面自動跳轉：把如下代碼加入<head>區域中<meta?? http-equiv="refresh"?? content="20;url=http://www.williamlong.info">,其中20指隔20秒后跳轉到http://www.williamlong.info頁面。????
???
? 頁面自動關閉??
???
? 5000是指時間<body?? onLoad="setTimeout(window.close,?? 5000)">????
???
? 彈出窗口自動關閉????
???
? 10秒后彈出窗口自動關閉??
???
? 注意：在新的tan.htm的body中要加?? <onLoad="closeit()">??
? head??
???
? <script?? language="JavaScript">??
???
? <!--??
???
? var?? gt?? =?? unescape('%3e');??
???
? var?? popup?? =?? null;??
???
? var?? over?? =?? "Launch?? Pop-up?? Navigator";??
???
? popup?? =?? window.open('',?? 'popupnav',?? 'width=225,height=235,resizable=1,scrollbars=auto');??
???
? if?? (popup?? !=?? null)?? {??
???
? if?? (popup.opener?? ==?? null)?? {??
???
? popup.opener?? =?? self;????
???
? }??
???
? popup.location.href?? =?? 'tan.htm';??
???
? }??
???
? //?? -->??
???
? </script>??
? <body>注意：這段代碼是在新建文件中的??
? <script?? language="JavaScript">??
???
??? function?? closeit()????
???
??? </script>??
???
? 這個可不是<iframe>(引用）呀。是直接調用的。以下代碼加入<body>區域??
???
? <object?? type="text/x-scriptlet"?? width="800"???? height="1000"?? data="../index.htm">??

轉載于:https://blog.51cto.com/yerik/324698

總結

以上是生活随笔為你收集整理的javascript常用技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。