The most commonly used 61 pieces of classic code in Javascript

one ο nc ο ntextmenu="window.event.returnValue=false" will completely block the right mouse button
<table border ο nc ο Ntextmenu = return (false) > < td > no < / Table > can be used for table


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


three ο npaste="return false" paste is not allowed


four ο nc ο py="return false;" oncut="return false;" prevent copying


5. < link rel = "shortcut icon" href = "favicon. ICO" > change your icon in front of the IE address bar


6. < link rel = "bookmark" href = "favicon. ICO" > you can display your icon in favorites

7. < input style = "ime mode: disabled" > turn off the input method

8. Always with a frame

<script language="JavaScript"><!--
if (window == top)top.location.href = "frames.htm"; //frames.htm is a frame page
// --></script>

9. Prevent being frame

<SCRIPT LANGUAGE=JAVASCRIPT><!-- 
if (top.location != self.location)top.location=self.location;
// --></SCRIPT>

10. The web page cannot be saved as

<noscript><*** src="/*.html>";</***></noscript>

11. < input type = button value = "/ view web page source code  
οnclick="window.location = "view-source:"+ "http://www.pconline.com.cn"">


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

//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(13)&"left="&l,64,"Get the location of the control"
end function
--></script>

14. The cursor stops at the end of the text in 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="/blog/Maximize onclick=hh2.Click()>
<input type=button value=close onclick=hh3.Click()>
This example applies to IE

17. Mask function keys Shift,Alt,Ctrl

<script>
function look(){ 
if(event.shiftKey) 
alert("No press Shift key!"); //You can change to ALT CTRL
} 
document.onkeydown=look; 
</script>

18. Web pages 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">
perhaps<META HTTP-EQUIV="expires" CONTENT="0">

19. How to make the form without bump?

<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. What is the difference between < div > < span > & < layer >?  

<div>(division)It is used to define page elements with large sections, which will generate line conversion 
<span>Used to define elements in the same line, followed by<div>The only difference is that there is no career change 
<layer>yes ns Mark of, ie Not supported, equivalent to<div>

21. Keep the pop-up window always at the 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 bar go: 
<body style="overflow:scroll;overflow-x:hidden"> 
</body> 
Get rid of both? It's easier 
<body scroll="no"> 
</body>

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

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

24. E-mail 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 of an open child window?

window.opener.location.reload()

26. How to set the size of an open page

<body onload="top.resizeTo(300,200);">
The location of the open page<body onload="top.moveBy(300,200);">

27. How to add a background picture that is not full in the page, and the background picture will 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 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("Containing Chinese characters");
else alert("All characters");

31. What is the number of adaptive text lines in textarea

<textarea rows=1 name=s1 cols=27 onpropertychange
="this.style.posHeight=this.scrollHeight">
</textarea>

32. Date minus days equals 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 * 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 selected

<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="/blog/barcode">Barcode
<INPUT type="button" value="check" onclick="checkme()">
</BODY></HTML>

34. The script never fails

<SCRIPT LANGUAGE="JavaScript"> 
<!-- Hide 
function killErrors() { 
return true; 
} 
window.onerror = killErrors; 
// --> 
</SCRIPT>

35. Press enter to move the cursor to the next input box

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

36. Check the link speed of a website:

Add the following code<body>In area:
<script language=Javascript>
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>life.netskycn.com"
autourl[2]="javacool.3322.net"
autourl[3]=1000){this.resized=true;this.style.width=1000;}" align=absMiddle border=0>www.netskycn.com"
autourl[4]="www.nuaa.edu.cn"
autourl[5]=1000){this.resized=true;this.style.width=1000;}" align=absMiddle border=0>bbs.netskycn.com"
function butt(){
***("<form name=autof>")
for(var i=1;i<autourl.length;i++)
***("<input type=text name=txt"+i+" size=10 value="/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+"second"}
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. Cursors of various styles

auto : Standard cursor
default : Standard arrow 
hand : Hand cursor
wait : Wait cursor
text : I Shape cursor
vertical-text : level I Shape cursor
no-drop : You cannot drag the cursor
not-allowed : invalid cursor
help : ?Help cursor
all-scroll : Triangular direction mark
move : Moving 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 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 called out. duration Indicates the duration of the effect, in seconds. transition Indicates which special effect to use. The value is 1-23:
  0 Rectangle reduction 
  1 Rectangular expansion 
  2 Circular reduction
  3 Circular enlargement 
  4 Refresh from bottom to top 
  5 Top to bottom refresh
  6 Left to right refresh 
  7 Right to left refresh 
  8 Vertical shutter
  9 Transverse shutter 
  10 Dislocation transverse shutter 
  11 Dislocation vertical shutter
  12 Point diffusion 
  13 Left to right to middle refresh 
  14 Middle to left and right refresh
  15 Middle to top and bottom
  16 Up and down to the middle 
  17 Bottom right to top left
  18 Top right to bottom left 
  19 Top left to bottom right 
  20 Bottom left to top right
  21 Horizontal bar 
  22 Vertical bar 
  23 Choose one of the above 22 at random

39. Jump within the specified time

<META http-equiv=V="REFRESH" content="5;URL=http://www.netskycn.com">

40. Is the web page retrieved

<meta name="ROBOTS" content="Attribute value">
  The attribute values are as follows:
  The attribute value is"all": The document 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 queried;
  The attribute value is"index": Documents will be retrieved;
  The attribute value is"follow": Links on the query 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. email address segmentation

Add the following code<body>In area
<a href="mailto:webmaster@sina.com">webmaster@sina.com</a>

42. Table of flow border effect

Add the following code<body>In 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+"> </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 home page pop-up skills

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>
============
<html>
<head>
<script language="LiveScript">
function WinOpen() {
    msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no");
    msg.***("<HEAD><TITLE>Hello!</TITLE></HEAD>");
    msg.***("<CENTER><H1>awesome!</H1><h2>This is<B>JavaScript</B>Open windows!</h2></CENTER>");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Push me" onclick="WinOpen()">
</form>
</body>
</html>

==============
1, In the following code, you can link to tianxia.com by clicking to open a window. When you want to close, you can close the window just opened by clicking.
  The code is as follows: 
  <SCRIPT language="JavaScript"> 
  <!-- 
  function openclk() { 
  another=open('1000){this.resized=true;this.style.width=1000;}" align=absMiddle border=0>www.netskycn.com','NewWindow'); 
  } 
  function closeclk() { 
  another.close(); 
  } 
  //--> 
  </SCRIPT> 
  <FORM> 
  <INPUT TYPE="BUTTON" NAME="open" value="/Open a window" onClick="openclk()"> 
  <BR> 
  <INPUT TYPE="BUTTON" NAME="close" value="/blog/close this window" onClick="closeclk()"> 
  </FORM> 
  2, The above code is too quiet. Why not move a little? How nice it would be 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> 
  <body onLoad="drop(300)"> 
  3, Hate that many websites always open according to the default window. If only you could control the open window as you like. 
  The code is as follows: 
  <SCRIPT LANGUAGE="JavaScript"> 
  <!-- 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.netskycn.com"; 
  popup = window.open(URL,"MenuPopup",windowprops); 
  } 
  // End --> 
  </script> 
  <table> 
  <tr> 
  <td> 
  <form name=popupform> 
  <pre> 
  Open page parameters<br> 
  Distance from left: <input type=text name=left size=2 maxlength=4> pixels 
  Distance from the right: <input type=text name=top size=2 maxlength=4> pixels 
  The width of the window: <input type=text name=width size=2 maxlength=4> pixels 
  Height of window: <input type=text name=height size=2 maxlength=4> pixels 
  </pre> 
  <center> 
  <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 just need to enter a value in the corresponding dialog box to control the window of the page to be opened very well.

44. When opening and moving the page, add the following code to the < body > area

 <script LANGUAGE="JavaScript"> <!-- 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 language = "livescript" > <! -- hiding today = new date() * * * ("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 each time:

 <html> <body> This is a simple HTML- page. <br> Last changes: <script language="LiveScript"> <!-- hide script from old browsers ***(document.lastModified) // end hiding contents --> </script> </body> </html> 

47. Can not be empty and mail address constraints:

 <html> <head> <script language="JavaScript"> <!-- Hide function test1(form) { if (form.text1.value == "") alert("You didn't write anything, please enter it again !") else { alert("hi "+form.text1.value+"! Your input is complete !"); } } function test2(form) { if (form.text2.value == "" || form.text2.value.indexOf('@', 0) == -1) alert("This is not true e-mail address! Please enter again !"); else alert("Your input is complete !"); } // -->< / script > < / head > < body > < form name = "first" > enter your name: < br > < input type = "text" name = "text1" > < input type = "button" name = "button1" value = "input test" onclick = "test1 (this. Form)" > < p > enter your e-mail address: < br > < input type = "text" name = "text2" > < input type = "button" name = "button2" value = "input test" onclick = "test2 (this. Form) "> </body>

48. Running lantern

 <html> <head> <script language="JavaScript"> <!-- Hide var scrtxt="How ! Isn't that cool ! You can also try."+"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 > < body onload = "scroll(); return true;" > your web page can be displayed here</ body> </html>

49. Use buttons in the web page to control the display of the front page, back page and home page.

 <html> <body> <FORM NAME="buttonbar"> <INPUT TYPE="button" VALUE="Back" onClick="history.back()"> <INPUT TYPE="button" VALUE="JS- Home" onClick="location='script.html'"> <INPUT TYPE="button" VALUE="Next" onCLick="history.forward()"> </FORM> </body> </html>

50. Check the source code of a website and add the following code to the < body > area

 <script> function add() { var ress=document.forms[0].luxiaoqing.value window.location="view-source:"+ress; } </script> Enter the source code you want to view URL address: <form><input type="text" name="luxiaoqing" size=40 value="http://"> < / form > < form > < br > < input type =" button "value =" view source code "onclick = add() > < / form > 

51. The title displays the date. Add the following code to the < body > area:

<script language="JavaScript1.2"> <!--hide var isnMonth = new Array("1 month","2 month","3 month","4 month","5 month","6 month","7 month","8 month","9 month","10 month","11 month","12 month"); 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+"year"+isnMonth[today.getMonth()]+Date+"day"+isnDay[today.getDay()] //--hide--> </script>

52. Display all links and add the following code to the < body > area

<script language="JavaScript1.2"> <!-- function extractlinks(){ var links=document.all.tags("A") var total=links.length var win2=window.open("","","menubar,scrollbars,toolbar") win2.***("<font size='2'>Altogether"+total+"Connections</font><br>") for (i=0;i<total;i++){ win2.***("<font size='2'>"+links[i].outerHTML+"</font><br>") } } //-->< / script > < input type = "button" onclick = "extractlinks()" value = "show all connections" >

53. Press enter to wrap the line and add the following codes to the < body > area

 <script type="text/javascript"> 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> <input type="text" onkeypress="return handleEnter(this, event)"><br> <input type="text" onkeypress="return handleEnter(this, event)"><br> <textarea>Enter line feed 

54. Submit after confirmation and add the following code into the < body > area

 <SCRIPT LANGUAGE="JavaScript"> <!-- function msg(){ if (confirm("Are you sure you want to submit it!")) document.lnman.submit() } //-->< / script > < form name = "lnman" method = "post" action = "" > < p > < input type = "text" name = "textfield" value = "submit after confirmation" > < / P > < p > < input type = "button" name = "submit" value = "submit" onclick = "msg();" > < / P > < / form >

55. Change the contents of the table and add the following code to the < body > area

<script ***script> var arr=new Array() arr[0]="one one one one one"; arr[1]="two two two two two"; arr[2]="three three three three three"; </script> <select onchange="zz.cells[this.selectedIndex].innerHTML=arr[this.selectedIndex]"> <option value=a>Change the first grid</option> <option value=a>Change the second grid</option> <option value=a>Change the third grid</option> </select> <table id=zz border=1> <tr height=20> <td width=150>First grid</td> <td width=150>Second grid</td> <td width=150>Third grid</td> </tr> </table> 

56. Get the current browser address URL:

<script language="JavaScript"> var myURL = document.URL; window.alert(myURL); </script>

57. Timing execution function

<script> <!-- function hello() { window.alert("Hello"); window.setTimeout("hello()",5000); } window.setTimeout("hello()",5000); // --> </script>

58. Cancel scheduled execution

 <script> <!-- function hello() { window.alert("Hello"); } var myTimeout = window.setTimeout("hello()",5000); window.clearTimeout(myTimeout); // --> </script>

59. Read URL parameters

<script language="JavaScript"> var urlParts = document.URL.split("?"); var parameterParts = urlParts[1].split("&"); for (i = 0; i < parameterParts.length; i++) { var pairParts = parameterParts[i].split("="); var pairName = pairParts[0]; var pairValue = pairParts[1]; document.write(pairName + " : " +pairValue ); } </script>

60. Read image attributes

<img src="/image1.jpg" name="myImage"> <a href="# " onClick="window.alert(document.myImage.width)">Width</a>

61. Create slides

<script language="JavaScript">
var imageList = new Array;
imageList[0] = new Image;
imageList[0].src = "image1.jpg";
imageList[1] = new Image;
imageList[1].src = "image2.jpg";
imageList[2] = new Image;
imageList[2].src = "image3.jpg";
imageList[3] = new Image;
imageList[3].src = "image4.jpg";
function slideShow(imageNumber) {
document.slideShow.src = imageList[imageNumber].src;
imageNumber += 1;
if (imageNumber < imageList.length) {
window.setTimeout("slideShow(" + imageNumber + ")",3000);
}
}
</script>
</head>
<body onLoad="slideShow(0)">
<img src="/"image1.jpg"" width=100 name="slideShow">

Recommended reading:

Implementation of filter algorithm with javascript canvas webgl css

Send the request using action in vuex

Screen cutting prevention function of online examination

Use these three features with caution

Keywords: Javascript ASP.NET html

Added by wompgx on Mon, 18 Oct 2021 08:20:10 +0300