Home >Web Front-end >JS Tutorial >Summary of JavaScript programming skills

Summary of JavaScript programming skills

不言
不言forward
2018-11-17 15:11:212111browse

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

"  t+="      "  for(x=2;x    "  t+=" "  for(x=Ny;x>0;x--)  t+=" "  ***(t+"  
no table> Can be used for Table

2,

Cancel selection, prevent copying

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


  <input> 

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


The attribute values ​​include the following:
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 will not be retrieved, and the links on the page will not be queried;
The attribute value is "index": the file will be retrieved;
The attribute value is "follow": the query Links on the page;
The attribute value is "noindex": the file is not retrieved, but the link can be queried;
The attribute value is "nofollow": the file is not retrieved, but the link on the page can be queried.
41. Segmentation of email addresses

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>
   
  
 
")  var N=Nx*2+Ny*2  function f1(y){  for(i=0;i 10)c=20-c  document.all["a_mo"+(i)].bgColor=""""#0000"+l[c]+l[c]+"‘"}  y++  setTimeout(‘f1(‘+y+‘)‘,‘1‘)}  f1(1) 

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

==============
1. In the following code, you only need to click to open a window to link to CCID.com. And when you want to close, just click to close the window you just opened.
The code is as follows:

<script> 
<!-- 
function openclk() { 
another=open(‘1000){this.resized=true;this.style.width=1000;}" align=absMiddle border=0>http://www.ccidnet.com‘,‘NewWindow‘); 
} 
function closeclk() { 
another.close(); 
} 
//--> 
</script> 
  <input> 
  <input> 

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> 
       
 
 
 
打开页面的参数 
  离开左边的距离: <input> pixels  离开右边的距离: <input> pixels  窗口的宽度: <input> pixels  窗口的高度: <input> pixels 
 
   
 
 

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> 
 
 
  Enter your name: 
  <input>  <input> 

  Enter your e-mail address: 
  <input>  <input> 

48. Marquee

 
 
<script> 
<!-- Hide 
var scrtxt="怎麽样 ! 很酷吧 ! 您也可以试试."+"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> 
 
 
这里可显示您的网页 ! 
 

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

 
 
  <input>  <input>  <input> 
   

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:


 <input> 
 
 
  <input> 

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

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!

Statement:
This article is reproduced at:segmentfault.com. If there is any infringement, please contact admin@php.cn delete