全国咨询热线:400-618-4000

Web前端开发培训之41个JavaScript实用技巧

更新时间:2016年11月23日14时46分 来源:传智播客web前端开发培训学院

1. 将彻底屏蔽鼠标右键

[JavaScript] 纯文本查看 复制代码
1
2
3
<font size="3">oncontextmenu=”window.event.returnValue=false
< table border oncontextmenu=return(false)>< td>no< /table> 可用于 Table</font>


2. 取消选取、防止复制

[JavaScript] 纯文本查看 复制代码
1
<font size="3">< body onselectstart=”return false”></font>


3.JS不允许粘贴

[JavaScript] 纯文本查看 复制代码
1
<font size="3">onpaste=”return false”</font>


4. JS防止复制

[JavaScript] 纯文本查看 复制代码
1
<font size="3">oncopy=”return false;” oncut=”return false;”</font>


5. IE 地址栏前换成自己的图标

[JavaScript] 纯文本查看 复制代码
1
<font size="3">< link rel=”Shortcut Icon” href=”favicon.ico”></font>

在文件的根目录放进去这个图片,后缀修改成ico就可以了


6.可以在收藏夹中显示出你的图标

[JavaScript] 纯文本查看 复制代码
1
<font size="3">< link rel=”Bookmark” href=”favicon.ico”></font>


7.关闭输入法

[JavaScript] 纯文本查看 复制代码
1
<font size="3">< input style=”ime-mode:disabled”></font>


8. 永远都会带着框架

[JavaScript] 纯文本查看 复制代码
1
2
3
4
5
<font size="3">< script language=”JavaScript”>< !–
if (window == top)top.location.href = “frames.htm”; //frames.htm 为框架网页
// –>< /script></font>


9. 防止被人 frame

[JavaScript] 纯文本查看 复制代码
1
2
3
4
5
<font size="3">< SCRIPT LANGUAGE=JAVASCRIPT>< !–
if (top.location != self.location)top.location=self.location;
// –>< /SCRIPT></font>


10. 网页将不能被另存为

[JavaScript] 纯文本查看 复制代码
1
<font size="3">< noscript>< iframe src=*.html>< /iframe>< /noscript></font>


11. < input type=button value=查看网页源代码

[JavaScript] 纯文本查看 复制代码
1
<font size="3">onclick=”window.location = “view-source:”+ “[url=http://www.pconline.com.cn]http://www.pconline.com.cn[/url]””></font>


12. 删除时确认

[JavaScript] 纯文本查看 复制代码
1
2
3
<font size="3">< a href=”javascript:if(confirm(” 确 实 要 删 除 吗 ?”))location=”boos.asp?&areyou= 删 除
&page=1″”>删除< /a></font>


13. 取得控件的绝对位置

[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<font size="3">//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,”得到控件的位置”
end function
–>< /script></font>


14. 光标是停在文本框文字的最后

[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
<font size="3">< 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()”></font>


15. 判断上一页的来源

[JavaScript] 纯文本查看 复制代码
1
2
3
<font size="3">javascript:
document.referrer</font>


16. 最小化、最大化、关闭窗口

[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
<font size="3">< 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=最小化 onclick=hh1.Click()>
< input type=button value=最大化 onclick=hh2.Click()>
< input type=button value=关闭 onclick=hh3.Click()></font>

本例适用于 IE


17.屏蔽功能键 Shift,Alt,Ctrl

[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
<font size="3">< script>
function look(){
if(event.shiftKey)
alert(“禁止按 Shift 键!”); //可以换成 ALT CTRL
}
document.onkeydown=look;
< /script></font>


18. 网页不会被缓存

[JavaScript] 纯文本查看 复制代码
1
2
3
4
5
6
7
<font size="3">< 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”>
或者< META HTTP-EQUIV=”expires” CONTENT=”0″></font>


19.怎样让表单没有凹凸感?

[JavaScript] 纯文本查看 复制代码
1
2
3
4
5
6
7
<font size="3">< input type=text style=”border:1 solid #000000″>
< input type=text style=”border-left:none; border-right:none; border-top:none; border-bottom:
1 solid #000000″>< /textarea></font>


20.< div>< span>&< layer>的区别?

[JavaFX] 纯文本查看 复制代码
1
2
3
4
5
<font size="3">< div>(division)用来定义大段的页面元素,会产生转行
< span>用来定义同一行内的元素,跟< div>的唯一区别是不产生转行
< layer>是 ns 的标记,ie 不支持,相当于< div></font>

web


21.让弹出窗口总是在最上面:

[JavaScript] 纯文本查看 复制代码
1
<font size="3">< body onblur=”this.focus();”></font>


22.不要滚动条?

让竖条没有:

[JavaScript] 纯文本查看 复制代码
1
2
3
<font size="3">< body style=”overflow:scroll;overflow-y:hidden”>
< /body></font>

让横条没有:

[JavaScript] 纯文本查看 复制代码
1
2
3
<font size="3">< body style=”overflow:scroll;overflow-x:hidden”>
< /body></font>

两个都去掉?更简单了

[JavaScript] 纯文本查看 复制代码
1
2
3
<font size="3">< body scroll=”no”>
< /body></font>


23.怎样去掉图片链接点击后,图片周围的虚线?

[JavaFX] 纯文本查看 复制代码
1
<font size="3">< a href=”#” onFocus=”this.blur()”>< img src=”logo.jpg” border=0>< /a></font>


24.电子邮件处理提交表单

[JavaScript] 纯文本查看 复制代码
1
2
3
4
5
<font size="3">< form name=”form1″ method=”post” action=”mailto:****@***.com” enctype=”text/plain”>
< input type=submit>
< /form></font>


25.在打开的子窗口刷新父窗口的代码里如何写?

[JavaScript] 纯文本查看 复制代码
1
<font size="3">window.opener.location.reload()</font>


26.如何设定打开页面的大小

[JavaScript] 纯文本查看 复制代码
1
2
3
<font size="3">< body onload=”top.resizeTo(300,200);”>
打开页面的位置< body onload=”top.moveBy(300,200);”></font>


27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动

[JavaFX] 纯文本查看 复制代码
1
2
3
4
5
6
7
8
9
<font size="3">< STYLE>
body
{background-image:none; background-repeat:no-repeat;
background-position:center;background-attachment: fixed}
< /STYLE></font>


28. 检查一段字符串是否全由数字组成

[JavaScript] 纯文本查看 复制代码
1
2
3
4
5
6
7
8
9
<font size="3">< script language=”Javascript”>< !–
function checkNum(str){return str.match(//D/)==null}
alert(checkNum(“1232142141”))
alert(checkNum(“123214214a1”))
// –>< /script></font>


29. 获得一个窗口的大小

[JavaScript] 纯文本查看 复制代码
1
<font size="3">document.body.clientWidth; document.body.clientHeight</font>


30. 怎么判断是否是字符

[JavaScript] 纯文本查看 复制代码
1
2
3
<font size="3">if (/[^/x00-/xff]/g.test(s)) alert(“含有汉字”);
else alert(“全是字符”);</font>


31.TEXTAREA 自适应文字行数的多少

[JavaScript] 纯文本查看 复制代码
1
2
3
<font size="3">< textarea rows=1 name=s1 cols=27 on