41 Web developers must collect JavaScript practical tips _javascript Tips

The JavaScript practical skills that Web developers must collect for your reference are as follows

1. Will completely screen the right mouse button

oncontextmenu= "Window.event.returnvalue=false"

< table border Oncontextmenu=return (false) >< td>no</table> available for table

2. Deselect, prevent replication

< body onselectstart= ' return false ' >

3.JS not allowed to paste

Onpaste= "return False"

4. js to prevent replication

Oncopy= ' return false; ' oncut= ' return false;

5. IE Address bar before replacing their own icon

< link rel= "shortcut Icon" href= "Favicon.ico" >
In the root directory of the file into the image, the suffix modified to ico on it

6. You can display your icon in the Favorites folder

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

7. Close the Input method

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

8. Always with the frame

< script language= "JavaScript" ><!–

if (window = top) Top.location.href = "frames.htm"; Frames.htm for frames page

–></script>

9. Prevent a person from being frame

< SCRIPT language=javascript><!–

if (top.location!= self.location) top.location=self.location;

–></script>

10. Web pages will not be saved as

< noscript>< iframe src=*.html></iframe></noscript>

< input Type=button value= View Web page source code

onclick= "window.location =" View-source: "+" http://www.pconline.com.cn "" >

12. Confirm upon deletion

< a href= "javascript:if (confirm) (" Do you want to delete it? ") 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,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 & "left=" &l,64, "get position of control" end
function
–></script>

14. Cursor is stopped at the end of text box text

< 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. Determining the origin 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= closes Onclick=hh3. Click () >

This example applies to IE

17. Screen function Key Shift,alt,ctrl

< script>
function look () {
if (event.shiftkey)
alert ("Do not press Shift key!");//Can be replaced with ALT CTRL
}
Document.onkeydown=look;
</script>

18. Web pages are not cached

< META http-equiv= "pragma" content= "No-cache" >

< META http-equiv= "Cache-control" content= "No-cache, must-revalidate" >

< META http-equiv= "expires" content= "Wed, Feb 1997 08:21:57 GMT" >

or < META http-equiv= "expires" content= "0″>

19. How do I make a form without bump and feel?

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

What is the difference between 20.< div>< span>&< layer>?

< div> (division) is used to define a large section of the page element, resulting in a career change

< span> is used to define elements within the same line, the only difference to < div> is not to create a career change

< layer> is the NS tag, IE does not support, equivalent to < div>

21. Make pop-up windows always on top:

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

22. Do not scroll bar?

Let the vertical bar not:

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

</body>
Let the cross bar not:

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

</body>
Two of them removed? It's even simpler.

< body scroll= "no" >

</body>

23. How to remove the picture link clicked, the dotted line around the picture?

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

24. e-mail processing submitting form

< form name= "form1″method=" post "action=" mailto:****@***.com "enctype=" Text/plain ">

< input type=submit>

</form>

25. How do I write in the code that refreshes the parent window in the Open child window?

Window.opener.location.reload ()

26. How to set the size of the open page

< body onload= "Top.resizeto (300,200);" >

Open the location of the page < body onload= "Top.moveby (300,200);" >

27. How to add a background picture that is not full on the page, pull the page when the background image does not move

< style>

Body

{background-image:none; background-repeat:no-repeat;

Background-position:center;background-attachment:fixed}

</style>

28. Check whether a string of strings is all 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 judge whether it is a character

if (/[^/x00-/xff]/g.test (s)) alert ("contains Chinese characters");

else alert ("All characters");

31.TEXTAREA the number of adaptive lines of text

< textarea Rows=1 name=s1 cols=27 onpropertychange= "This.style.posheight=this.scrollheight" >

</textarea>

32. Date minus days equals second date

< script language=javascript>
function cc (dd,dadd)
{
//can be added error handling
var a = new Date (dd)
a =  A.valueof ()
a = a–dadd * * 1000
a = new Date (a)
alert (a.getfullyear () + "year" + (A.getmonth () + 1 + "Month" + a.getdate () + "Day")
}
cc ("12/23/2002", 2)
</script>

33. Which Radio was chosen

< 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" onclick= "Checkme ()" >
</body> 
 

34. Script never Goes wrong

< SCRIPT language= "JavaScript" >
<!–hide
function killerrors () {return
true;
}
Window.onerror = killerrors;
–>
</script>

The ENTER key lets you move the cursor to the next input box

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

36. Detect the link speed of a website:

Add the following code to the < body> area:

< script language=javascript> tim=1 setinterval ("tim++", MB) 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= Test ......> =" < input type=text Name=url "+i+" size=40& Gt = "< input Type=button value=go Onclick=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=url if (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 ("< img src=http://" +autourl+ "/" +math.random () + "width=1
Height=1 Onerror=auto ("http://" +autourl+) > ")} run () </script>
 

37. Various styles of cursors

Auto: Standard cursor

Default: Standard arrow

Hand: hand-shaped cursor

Wait: Waiting for cursor

Text:i-shaped cursor

Vertical-text: Horizontal I-type cursor

No-drop: Non-drag cursor

Not-allowed: Invalid cursor

Help:? Helper cursors

All-scroll: Triangle directional Sign

Move: Moving the label

Crosshair: Cross Mark

E-resize

N-resize

Nw-resize

W-resize

S-resize

Se-resize

Sw-resize

38. Page entry and exit effects

Enter page < meta http-equiv= "Page-enter" content= "Revealtrans (duration=x, transition=y)" >

Launch page < meta http-equiv= "Page-exit" content= "Revealtrans (duration=x, transition=y)" >

This is some special effects when the page is loaded and paged out. Duration represents the duration, in seconds, of the effect.

Transition indicates which special effect is used, which takes a value of

1-23:

0 Rectangle Shrink

1 Rectangle Enlargement

2 round Shrink

3 Circular Enlargement

4 down to top refresh

5 Top to bottom refresh

6 Left to right refresh

7 Right to left flush

8 Vertical Blinds

9 Horizontal Blinds

10 Dislocation Horizontal Blinds

11 Misplaced Vertical Blinds

12 Point spread

13 or so to the middle of the refresh

14 Middle to left flush

15 Middle to bottom

16 up and down to the middle.

17 right down to top left

18 top right to bottom left

19 top left to bottom right

20 left down to top right

21 Cross Bar

22 Vertical Bar

23 or more of 22 randomly selected one

39. Jump within a specified time

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

40. Whether the Web page has been retrieved

< meta name= "content=" "Property value" >
There are some of the following property values:

The property value is "All": The file will be retrieved and the link on the page can be queried;

The property value is "None": The file is not retrieved and the link on the page is not queried;

The property value is "index": The file will be retrieved;

Property value is "Follow": a link on the query page;

The property value is "Noindex": The file is not retrieved but can be queried for links;

The property value is "nofollow": The file is not retrieved, but the link on the page can be queried.

41. Carriage return

Add the document onkeydown event to the page with client script to have the page tab after receiving the carriage return event

The function of the key, that is, as long as the event of the KeyCode 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, you can achieve the focus of moving down, but for the button also play the same role, the average customer in the end of the input

After the data, jump to the button, it is best to directly press "enter" for data submission. So, for the above method,

Modification, you should not focus on the submit button. Instead, direct activation commits.

So I made a modification to the above code, that is, to determine 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>

To determine if it is a button, because there will be a type= "button" on the HTML

To decide whether to submit, because the HTML will have type= "submit"

To determine if reset is because the "reset" on HTML should be executed

To determine if it is empty because the "<a> link" on HTML should also be executed, which is not happening much, you can use the "Tabindex=-1″ way to unlink the link to get focus."

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.