Share the 55 most commonly used classic tips in Javascript

Author：Eve Cole Update Time：2025-01-17 19:12:01

1. oncontextmenu="window.event.returnValue=false" will completely block the right mouse button

<table border oncontextmenu=return(false)><td>no</table> can be used for Table

2. <body onselectstart="return false"> Cancel selection and prevent copying

3. onpaste="return false" is not allowed to paste

4. oncopy="return false;" oncut="return false;" to prevent copying

5. <link rel="Shortcut Icon" href="favicon.ico"> Replace the IE address bar with your own icon

6. <link rel="Bookmark" href="favicon.ico"> can display your icon in favorites

7. <input style="ime-mode:disabled"> Close input method

8. Always carry a framework

if (window == top)top.location.href = "frames.htm"; //frames.htm is a frame web page

// --></script>

9. Prevent being framed

<SCRIPT LANGUAGE=JAVASCRIPT><!--

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

// --></SCRIPT>

10. Web pages will not be saved as

11. <input type=button value="/View web page source code

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

12. Confirm when deleting

<a href=""javascript :if(confirm("Are you sure you want to delete?"))location="boos.asp?&areyou=delete&page=1"">Delete</a>

13. Get the absolute position of the control

Copy the code code as follows:

//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,"Get the position of the control"

end function

--></script>

14. The cursor is stopped at the end of the text in the text box

Copy the code code as follows:

functioncc()

{

var e = event.srcElement;

var r =e.createTextRange();

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

r.collapse(true);

r.select();

}

</script>

15. Determine the source of the previous page

javascript :

document.referrer

16. Minimize, maximize, close window

This example is for IE

17. Shield function keys Shift, Alt, Ctrl

function look(){

if(event.shiftKey)

alert("Prohibit pressing the Shift key!"); //Can be replaced with ALT CTRL

}

document.onkeydown=look;

</script>

18. Web pages will not be cached

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

19. How to make the form less concave and convex?

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

1 solid #000000"></textarea>

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

<div>(division) is used to define large sections of page elements, which will cause line breaks.

<span> is used to define elements within the same line. The only difference from <div> is that it does not cause line breaks.

<layer> is a tag of ns, which is not supported by ie. It is equivalent to <div>

21. Make the pop-up window always on top:

22. No scroll bars?

Let there be no vertical bars:

</body>

Leave the bars blank:

</body>

Remove both? simpler

</body>

23. How to remove the dotted line around the image after clicking on the image link?

24. Email Processing Submit Form

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

enctype="text/plain">

</form>

25. How to write the code to refresh the parent window in the opened child window?

window.opener.location.reload()

26.How to set the size of the opened page

Open page location<body onload="top.moveBy(300,200);">

27. How to add a non-full background image to 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 consists entirely of numbers

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.The number of TEXTAREA adaptive text lines

<textarea rows=1 name=s1 cols=27 onpropertychange

="this.style.posHeight=this.scrollHeight">

</textarea>

32. Date minus number of days equals second date

functioncc(dd,dadd)

{

//Error handling can be added

var a = new Date(dd)

a = a.valueOf()

a = a - dadd * 24 * 60 * 60 * 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 is selected?

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. Scripts never go wrong

<!-- Hide

function killErrors() {

return true;

}

window.onerror = killErrors;

// -->

</SCRIPT>

35. The ENTER key can move the cursor to the next input box

36. Check the link speed of a website:

Add the following code to the <body> area:

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="/Under testing...> =》<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=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="/blog/time"+tim/10+"seconds"}

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 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: triangular direction indicator

move: move the target

crosshair: cross mark

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

Exit page<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">

These are 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 Rectangular expansion

2 circle reduction

3 circular expansion

4 Refresh from bottom to top

5 Refresh from top to bottom

6 refresh left to right

7 Refresh right to left

8 vertical blinds

9 horizontal blinds

10 offset horizontal blinds

11 offset vertical blinds

12 point spread

13 Refresh from left to right

14 Refresh from center to left and right

15 middle to top and bottom

16 up and down to the middle

17 lower right to upper left

18 upper right to lower left

19 upper left to lower right

20 from lower left to upper right

21 horizontal bars

22 vertical bars

23 Randomly select one of the above 22 types

39. Jump within the specified time

40. Whether the web page is retrieved

The attribute values include the following:

The attribute value is "all": files will be retrieved and 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 queried;

The attribute value is "index": the file will be retrieved;

The attribute value is "follow": query the link on the page;

The attribute value is "noindex": the file is not retrieved, but can be queried and linked;

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

41. Segmentation of email addresses

Add the following code to the <body> area

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

42. Table with flowing border effect

Add the following code to the <body> area

Copy the code code as follows:

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 homepage pop-up window techniques

Pop up in the middle of window

Copy the code code as follows:

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>Hello!</TITLE></HEAD>");

msg.***("<CENTER><H1>How cool!</H1><h2>This is the window opened by <B>JavaScript</B>!</h2></CENTER>");

}

</script>

</head>

<body>

<form>

</form>

</body>

</html>

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

1. In the code below, you only need to click to open a window to link to CCID. And when you want to close, just click to close the window you just opened.

The code is as follows:

Copy the code code as follows:

<! --

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>

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:

Copy the code code as follows:

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 in the default window. It would be great if you could control the opened window as you wish.

The code is as follows:

Copy the code code as follows:

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

Open page parameters<br>

Distance from left: <input type=text name=left size=2 maxlength=4> pixels

Distance from right: <input type=text name=top size=2 maxlength=4> pixels

Window width: <input type=text name=width size=2 maxlength=4> pixels

Window height: <input type=text name=height size=2 maxlength=4> pixels

</pre>

<input type=button value="Open this window!" onClick="popupPage(this.form.left.value, this.form.top.value, this.form.width.value,

this.form.height.value)">

</center>

</form>

</td>

</tr>

</table>

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. Page opening and movement

Add the following code to the <body> area

Copy the code code as follows:

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

Copy the code code as follows:

<!-- Hiding

today = new Date()

***("The current time is: ",today.getHours(),":",today.getMinutes())

***("<br>Today's date is: ", today.getMonth()+1,"/",today.getDate(),"/",today.getYear());

// end hiding contents -->

</script>

46. Automatically generate the last modified date for you every time:

Copy the code code as follows:

<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. Cannot be empty and email address constraints:

Copy the code code as follows:

<html>

<head>

<!-- Hide

function test1(form) {

if (form.text1.value == "")

alert("You didn't write anything, please enter it again!")

else {

alert("Hi"+form.text1.value+"! You have completed your input!");

}

function test2(form) {

if (form.text2.value == "" ||

form.text2.value.indexOf('@', 0) == -1)

alert("This is not the correct e-mail address! Please enter it again!");

else alert("You have completed your input!");

}

// -->

</script>

</head>

<body>

Enter your name:<br>

<P>

Enter your e-mail address:<br>

</body>

48. Marquee

Copy the code code as follows:

<html>

<head>

<!-- Hide

var scrtxt="How about! It's cool! You can also try it."+"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>

Your web page can be displayed here!

</body>

</html>

49. Use buttons in the web page to control the display of the previous page, next page and home page.

Copy the code code as follows:

<html>

<body>

</FORM>

</body>

</html>

50. View the source code of a website

Add the following code to the <body> area

Copy the code code as follows:

function add()

{

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

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

}

</SCRIPT>

Enter the URL address where you want to view the source code:

Copy the code code as follows:

</FORM>

51. Title displays date

Add the following code to the <body> area:

Copy the code code as follows:

<!--hide

var isnMonth = new

Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October ","November","December");

var isnDay = new

Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday");

today = new Date () ;

Year=today.getYear();

Date=today.getDate();

if(document.all)

document.title="Today is: "+Year+"年"+isnMonth[today.getMonth()]+Date+"日"+isnDay[today.getDay()]

//--hide-->

</script>

52. Show all links

Add the following code to the <body> area

Copy the code code as follows:

<!--

function extractlinks(){

var links=document.all.tags("A")

var total=links.length

var win2=window.open("","","menubar,scrollbars,toolbar")

win2.***("<font size='2'>There are "+total+" connections in total</font><br>")

for (i=0;i<total;i++){

win2.***("<font size='2'>"+links[i].outerHTML+"</font><br>")

}

//-->

</script>

53. Enter key to change line

Add the following code to the <body> area

Copy the code code as follows:

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>Carriage return and line feed

54. Submit after confirmation

Add the following code to the <body> area

Copy the code code as follows:

<!--

function msg(){

if (confirm("Are you sure you want to submit!"))

document.lnman.submit()

}

//-->

</SCRIPT>

<p>

</p>

<p>

</p>

</form>

55. Change the content of the table

Add the following code to the <body> area

Copy the code code as follows:

var arr=new Array()

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

arr[1]="two two two two two";

arr[2]="three three three three three";

</script>

<option value=a>Change the first frame</option>

<option value=a>Change the second frame</option>

<option value=a>Change the third frame</option>

</select>

<td width=150>First frame</td>

<td width=150>Second frame</td>

<td width=150>Third frame</td>

</tr>

</table>