The practical JavaScript skills that web developers must collect for your reference. The specific content is as follows
1. The right mouse button will be completely blocked
oncontextmenu=”window.event.returnValue=false”
< table border oncontextmenu=return(false)><td>no</table> can be used for Table
2. Unselect and prevent copying
< body onselectstart=”return false”>
3.JS does not allow pasting
onpaste=”return false”
4. JS prevents copying
oncopy=”return false;” oncut=”return false;”
5. Change to your own icon in front of the IE address bar
< link rel=”Shortcut Icon” href=”favicon.ico”>
Put this image in the root directory of the file and modify the suffix to ico
6. You can display your icon in your favorites
< link rel=”Bookmark” href=”favicon.ico”>
7. Turn off the input method
< input style="ime-mode:disabled">
8. Always carry a frame
< script language=”JavaScript”><!
if (window == top)top.location.href = "frames.htm"; //frames.htm is the frame web page
// ></script>
9. Prevent frames from being
< SCRIPT LANGUAGE=JAVASCRIPT>< !
if (top.location != self.location)top.location=self.location;
// >< /SCRIPT>
10. The web page will not be saved as
< noscript>< iframe src=*.html>< /iframe>< /noscript>
11. < input type=button value=View web page source code
onclick=”window.location = “view-source:”+ “http://www.pconline.com.cn””>
12. Confirm when deletion
< a href="javascript:if(confirm(" does it really need to be deleted?")) location="boos.asp?&areyou= Delete
&page=1″”>Delete</a>
13. Get the absolute position of the control
//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,bset a=document.all.img1t=document.all.img1.offsetTopl=document.all.img1.offsetLeftwhile a.tagName< >"BODY"set a = a.offsetParentt=t+a.offsetTopl=l+a.offsetLeftwendmsgbox "top="&t&chr(13)&"left="&l,64,"get the control's position"end function>< /script>14. The cursor is stopped at the end of the text box
< 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. Determine the source of the previous page
javascript:
document.referrer
16. Minimize, maximize, close windows
< 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=minimize onclick=hh1.Click()>< input type=button value=maximize onclick=hh2.Click()>< input type=button value=close onclick=hh3.Click()>
This example applies to IE
17. Block function keys Shift, Alt, Ctrl
< script>function look(){if(event.shiftKey)alert("Shift key is prohibited!"); //Can be replaced with ALT CTRL}document.onkeydown=look;< /script>18. The web page will not be cached
< 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”>
Or <META HTTP-EQUIV=”expires” CONTENT=”0″>
19. How to make the form have no concave and convex feeling?
< input type=text style=”border:1 solid #000000″>
or
< input type=text style=”border-left:none; border-right:none; border-top:none; border-bottom:
1 solid #000000″>< /textarea>
20. The difference between < div>< span>&< layer>?
< div>(division) is used to define large segments of page elements, which will cause a line transfer
<span> is used to define elements in the same line. The only difference between <div> is that it does not produce a line transfer
< layer> is a tag of ns, ie does not support it, which is equivalent to <div>
21. Let the pop-up window always be on the top:
< body onblur="this.focus();">
22. Don’t scroll bars?
Let the vertical bar not:
< body style="overflow:scroll;overflow-y:hidden">
< /body>
Let the horizontal bar not:
< body style="overflow:scroll;overflow-x:hidden">
< /body>
Remove both? It's easier
< body scroll="no">
< /body>
23. How to remove the dotted lines around the picture after clicking on the picture link?
< a href="#" onFocus="this.blur()">< img src="logo.jpg" border=0>< /a>
24. Email processing submission form
< form name=”form1″ method=”post” action=”mailto:****@***.com” enctype=”text/plain”>
<input type=submit>
< /form>
25. How to write in the code of refreshing the parent window in the open child window?
window.opener.location.reload()
26. How to set the size of the page to open
< body onload=”top.resizeTo(300,200);”>
The location where the page is opened < body onload="top.moveBy(300,200);">
27. How to add a background picture that is not full on the page, and the background picture remains unmoved when pulling the page
< STYLE>
Body
{background-image:none; background-repeat:no-repeat;
background-position:center;background-attachment: fixed}
< /STYLE>
28. Check whether a string is composed of numbers
< script language=”Javascript”>< !
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("Contains Chinese characters");
else alert("all characters");
31.TEXTAREA How many lines of adaptive text
< textarea rows=1 name=s1 cols=27 onpropertychange=”this.style.posHeight=this.scrollHeight”>
< /textarea>
32. Date minus days equal to the second date
< script language=Javascript>function cc(dd,dadd){//Error handling can be added var a = new Date(dd)a = a.valueOf()a = a dadd * 24 * 60 * 60 * 1000a = new Date(a)alert(a.getFullYear() + "year" + (a.getMonth() + 1) + "month" + a.getDate() + "day")}cc("12/23/2002",2)< /script>33. Which Radio was selected
< HTML>< script language=”vbscript”>function checkme() for each ob in radio1if ob.checked then window.alert ob.valuenextend 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” onclick=”checkme()”>< /BODY>< /HTML>
34. The script never goes wrong
< SCRIPT LANGUAGE=”JavaScript”>< ! Hidefunction killErrors() {return true;}window.onerror = killErrors;// ></SCRIPT>35. The ENTER key allows the cursor to move to the next input box
< input onkeydown=”if(event.keyCode==13)event.keyCode=9″>
36. Detect the link speed of a certain website:
Add the following code to the <body> area:
< script language=Javascript>tim=1setInterval("tim++",100)b=1var 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=In test...> =》< inputtype=textname=url”+i+” size=40> =》< input type=button value=GOonclick=window.open(this.form.url”+i+”.value)>")document.write("< input type=submit value=refresh></form>")}butt()function auto(url){document.forms[0]["url"+b].value=urlif(tim>200){document.forms[0]["txt"+b].value="link timeout"}else{document.forms[0]["txt"+b].value="Time"+tim/10+"seconds"}b++}function run(){for(var i=1;i< autourl.length;i++)document.write("< imgsrc=http://"+autourl+"/"+Math.random()+"width=1 height=1onerror=auto("http://"+autourl+"")>")}run()< /script>37. Various styles of cursors
auto: standard cursor
default: standard arrow
hand: hand cursor
wait : Wait for the cursor
text: I-shaped cursor
vertical-text: horizontal I-shaped cursor
no-drop: The cursor cannot be dragged
not-allowed: Invalid cursor
help :?Help cursor
all-scroll: triangle direction mark
move: mobile tag
crosshair: crosshair
e-resize
n-resize
nw-resize
w-resize
s-resize
se-resize
sw-resize
38. Special effects for page entry and exit
Enter the page <meta http-equiv=”Page-Enter” content=”revealTrans(duration=x, transition=y)”>
Release page <meta http-equiv=”Page-Exit” content=”revealTrans(duration=x, transition=y)”>
This is some special effects when the page is loaded and called out. duration represents the duration of the special effect in seconds.
transition indicates which special effect to use, the value is
1-23:
0 Rectangle shrink
1 Rectangle enlargement
2 round shrink
3 Circular enlargement
4 Down to top to refresh
5 Refresh up to down
6 Refresh left to right
7 Right to left refresh
8 vertical blinds
9 horizontal blinds
10 Displaced horizontal blinds
11 Dislocated vertical blinds
12 points of diffusion
13 Refresh around the middle
14 Refresh in the middle to left and right
15 Middle to top
16 Up and down to middle
17 Lower right to upper left
18 Top right to bottom left
19 Top left to bottom right
20 Lower left to upper right
21 horizontal bars
22 vertical strips
23 or more randomly choose one of the 22 types
39. Jump within the specified time
< META http-equiv=V=”REFRESH” content=”5;URL=http://www.51js.com”>
40. Whether the web page has been retrieved
< meta name=”ROBOTS” content=”attribute value”>
The attribute values are as follows:
The attribute value is "all": the file will be retrieved, and the links on the page can be queried;
The attribute value is "none": The file is not retrieved and the links on the page are not queryed;
The attribute value is "index": the file will be retrieved;
The attribute value is "follow": the link on the query page;
The attribute value is "noindex": The file is not retrieved, but can be queryed for links;
The property value is "nofollow": The file is not retrieved, but the links on the page can be queried.
41. Enter
Use client script to add the onkeydown event of document to the page, so that the page can perform a tab after receiving the carriage return event.
The function of the key is to change the keyCode of the event from 13 to 9
The Javascript code is as follows:
<script language=”javascript” for=”document” event=”onkeydown”><!if(event.keyCode==13)event.keyCode=9;></script>
This way of processing can move the focus downward, but it also plays the same role for buttons. Generally, customers have finished entering
After the data is jumped to the button, it is best to press "Enter" directly to submit the data. Therefore, the above method needs to be performed.
For modification, the "Submit" button should not be shifted. Instead, the submission should be activated directly.
Therefore, I made a modification to the above code, that is, to determine whether the "source" of the event is the submit button. The code is as follows:
<script language=”javascript” for=”document” event=”onkeydown”><!if(event.keyCode==13 && event.srcElement.type!='button' &&event.srcElement.type!='submit' && event.srcElement.type!='reset' &&event.srcElement.type!='textarea' && event.srcElement.type!=")event.keyCode=9;></script>
Determine whether it is a button, because there will be type="button" on HTML
Determine whether it is submitted, because there is type="submit" on HTML
Determine whether it is reset because the "reset" on HTML should be executed
The judgment is that it is empty because the "<a> link" on HTML should also be executed. This situation does not happen much. You can use the "tabindex=-1" method to unlink and get focus.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.