Home >Web Front-end >JS Tutorial >Summary of JavaScript programming skills
This article brings you a summary of JavaScript programming skills. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
1. oncontextmenu="window.event.returnValue=false" will completely block the right mouse button
no table> Can be used for Table 2, Cancel selection, prevent copying3, onpaste="return false" No pasting is allowed 4. oncopy="return false;" oncut="return false;" Prevent copying 5. in front of the IE address bar Change to your own icon 6, You can display your icon in your favorites 7, Turn off the input method 8. Always carry the frame <script> <!-- if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页 // --> </script> 9. Prevent being framed <script> <!-- if (top.location != self.location)top.location=self.location; // --> </script> 10. The webpage will not be saved as <noscript> "; ***> </noscript> 11, onclick=" window.location></p> <p>12. Confirm when deleting</p> <pre class="brush:php;toolbar:false"><a>删除 </a> 13, Get the absolute position of the control //Javascript <script> 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> <!-- 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. The cursor is stopped at the end of the text in the text box <script> function cc() { var e = event.srcElement; var r =e.createTextRange(); r.moveStart("character",e.value.length); r.collapse(true); r.select(); } </script> <input> 15. Determine the source of the previous page javascript : document.referrer 16. Minimize, Maximize and close the window <object> <param> </object> <object> <param> </object> <object> <param> </object> <input> <input> <input> 本例适用于IE 17. Shield the function keys Shift, Alt, Ctrl <script> function look(){ if(event.shiftKey) alert("禁止按Shift键!"); //可以换成ALTCTRL } document.onkeydown=look; </script> 18. The web page will not be cached <meta> <meta> <meta> 或者 <meta> 19. How to make the form bump-free Sense? <input> 或 <input> 20. The difference between &
<div>(division)用来定义大段的页面元素,会产生转行 <span>用来定义同一行内的元素,跟 <div>的唯一区别是不产生转行 <layer>是ns的标记,ie不支持,相当于 <div> 21. Let the pop-up window always be at the top: 22. No scroll bars? 让竖条没有: 让横条没有: 两个都去掉?更简单了 23. How to remove the dotted line around the picture after clicking on the picture link? <a> <img src="/static/imghwm/default1.png" data-src="/logo.jpg" class="lazy" alt="Summary of JavaScript programming skills" > </a> 24. Email processing submission form 25. How to write the code that refreshes the parent window in the opened child window? window.opener.location.reload() 26. How to set the size of the open page 打开页面的位置 27. How to add a background image that is not full of space on the page so that the background image does not move when the page is pulled <style> body {background-image:url(/logo.gif); background-repeat:no-repeat; background-position:center;background-attachment: fixed} </style> 28. Check whether a string is composed entirely of numbers <script> <!-- function checkNum(str){return str.match(//D/)==null} alert(checkNum("1232142141")) alert(checkNum("123214214a1")) // --> </script> 29. Get the size of a window document.body.clientWidth; document.body.clientHeight 30. How to determine whether it is a character if (/[^/x00-/xff]/g.test(s)) alert("含有汉字"); else alert("全是字符"); 31.TEXTAREA The number of adaptive text lines <textarea> </textarea> 32. The date minus the number of days is equal to the second date <script> 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. Which Radio is selected <script> function checkme() for each ob in radio1 if ob.checked then window.alert ob.value next end function </script> <input>Style <input>Barcode <input> 34. The script is permanent No error <script> <!-- Hide function killErrors() { return true; } window.onerror = killErrors; // --> </script> 35. The ENTER key can move the cursor to the next input box <input> 36. Detect the link speed of a website: 把如下代码加入 区域中: <script> 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=刷新> ") } 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. Various Style cursor 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. Special effects for page entry and exit 进入页面 <meta> 推出页面 <meta> 这个是页面被载入和调出时的一些特效。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 竖条 以上22种随机选择一种 39. Jump within the specified time <meta> 40. Whether the web page is retrieved Add the following code to the area<a>webmaster@sina.com </a> 42. Table with flowing border effect Add the following code< ;body> area <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+"> </script> | "
t+=" ||
" t+=" | ||
" ***(t+" |
43, JavaScript homepage pop-up window technique
Pop-up in the middle of the window
<script> window.open("http://www.cctv.com","","width=400,height=240,top="+(screen.availHeight-240)/2+",left="+(screen.availWidth-400)/2); </script> ============ <script> function WinOpen() { msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no"); msg.***(" <HEAD> <TITLE>哈 罗! "); msg.***(" <CENTER> <H1>酷 毙 了! <h2>这 是 <B>JavaScript 所 开 的 视 窗! "); } </script>
2. The above code is too quiet, why not make it more dynamic? It would be great if you could give the page a landing effect!
The code is as follows:
<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>
3. I hate that many websites always open according to the default window. It would be great if you could control the opened window as you wish.
The code is as follows:
<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 = "http://www.80cn.com"; popup = window.open(URL,"MenuPopup",windowprops); } // End --> </script>
You only need to enter a value in the corresponding dialog box, and the window of the page to be opened is well controlled.
44. Open and move the page
Add the following code to the
area<script> <!-- 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. Display the date and time of the personal client machine
<script> <!-- Hiding today = new Date() ***("现 在 时 间 是: ",today.getHours(),":",today.getMinutes()) ***(" <br>今 天 日 期 为: ", today.getMonth()+1,"/",today.getDate(),"/",today.getYear()); // end hiding contents --> </script>
46. Automatically generate the last modified date for you each time:
This is a simple HTML- page. <br> Last changes: <script> <!-- hide script from old browsers ***(document.lastModified) // end hiding contents --> </script>
47. Cannot be empty and email address constraints:
<script> <!-- 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>
50. View the source code of a certain URL
Add the following code to the
area<script> function add() { var ress=document.forms[0].luxiaoqing.value window.location="view-source:"+ress; } </script>
Enter the URL address to view the source code:
51. Title displays date
Add the following code to the
area:<script> <!--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. Display all links
Add the following code area
<script> <!-- function extractlinks(){ var links=document.all.tags("A") var total=links.length var win2=window.open("","","menubar,scrollbars,toolbar") win2.***(" <font size=‘2‘>一共有"+total+"个连接 <br>") for (i=0;i <total;i++){ win2.***(" <font size=‘2‘>"+links.outerHTML+" <br>") } } //--> </script> <input>
53, enter key to change line
把如下代码加入
区域中<script> 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) break; i = (i + 1) % field.form.elements.length; field.form.elements.focus(); return false; } else return true; } </script>
The above is the detailed content of Summary of JavaScript programming skills. For more information, please follow other related articles on the PHP Chinese website!