40种网页常用小技巧

Sun 10 July 2005

40种网页常用小技巧

下面是javascript的40个网页常用小技巧，对网站开发人员相信会有帮助。

1. oncontextmenu=\"window.event.returnValue=false\" 将彻底屏蔽鼠标右键\ \<table border oncontextmenu=return(false)>\<td>no\</table> 可用于Table

2. \<body onselectstart=\"return false\"> 取消选取、防止复制

3. onpaste=\"return false\" 不准粘贴

4. oncopy=\"return false;\" oncut=\"return false;\" 防止复制

5. \<link rel=\"Shortcut Icon\" href=\"favicon.ico\"> IE地址栏前换成自己的图标

6. \<link rel=\"Bookmark\" href=\"favicon.ico\"> 可以在收藏夹中显示出你的图标

7. \<input style=\"ime-mode:disabled\"> 关闭输入法

8. 永远都会带着框架\ \<script language=\"JavaScript\">\\</script>

9. 防止被人frame\ \<SCRIPT LANGUAGE=JAVASCRIPT>\\</SCRIPT>

10. 网页将不能被另存为\ \<noscript>\<iframe src=\"/blog/*.html>\";\</iframe>\</noscript>

11. \<input type=button value=查看网页源代码\ onclick=\"window.location = \"view-source:\"+ \"https://www.williamlong.info\"\">

12.删除时确认\ \<a href=\"javascript:if(confirm(\"确实要删除吗?\"))location=\"boos.asp?&areyou=删除&page=1\"\">删除\</a> _fcksavedurl=\"\"javascript:if(confirm(\"确实要删除吗?\"))location=\"boos.asp?&areyou=删除&page=1\"\">删除\</a>\"

13. 取得控件的绝对位置\ //Javascript\ \<script language=\"Javascript\">\ function getIE(e){\ var t=e.offsetTop;\ var l=e.offsetLeft;\ while(e=e.offsetParent)\ alert(\"top=\"+t+\"/nleft=\"+l);\ }\ \</script>

//VBScript\ \<script language=\"VBScript\">\\</script>

14. 光标是停在文本框文字的最后\ \<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. 判断上一页的来源\ javascript:\ document.referrer

16. 最小化、最大化、关闭窗口\ \<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()>\ 本例适用于IE

17.屏蔽功能键Shift,Alt,Ctrl\ \<script>\ function look(){\ if(event.shiftKey)\ alert(\"禁止按Shift键!\"); //可以换成ALT　CTRL\ }\ document.onkeydown=look;\ \</script>

18. 网页不会被缓存\ \<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\">

19.怎样让表单没有凹凸感？\ \<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>

20.\<div>\<span>&\<layer>的区别？\ \<div>(division)用来定义大段的页面元素，会产生转行\ \<span>用来定义同一行内的元素，跟\<div>的唯一区别是不产生转行\ \<layer>是ns的标记，ie不支持，相当于\<div>

21.让弹出窗口总是在最上面:\ \<body onblur=\"this.focus();\">

22.不要滚动条?\ 让竖条没有:\ \<body style=\"overflow:scroll;overflow-y:hidden\">\ \</body>\ 让横条没有:\ \<body style=\"overflow:scroll;overflow-x:hidden\">\ \</body>\ 两个都去掉？更简单了\ \<body scroll=\"no\">\ \</body>

23.怎样去掉图片链接点击后，图片周围的虚线？\ \<a href=\"#\" onFocus=\"this.blur()\">\<img src=\"/blog/logo.jpg\" border=0>\</a>

24.电子邮件处理提交表单\ \<form name=\"form1\" method=\"post\" action=\"https://www.williamlong.info\"\">

15. 判断上一页的来源\ javascript:\ document.referrer

17.屏蔽功能键Shift,Alt,Ctrl\ \<script>\ function look(){\ if(event.shiftKey)\ alert(\"禁止按Shift键!\"); //可以换成ALT　CTRL\ }\ document.onkeydown=look;\ \</script>

19.怎样让表单没有凹凸感？\ \<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>

21.让弹出窗口总是在最上面:\ \<body onblur=\"this.focus();\">

23.怎样去掉图片链接点击后，图片周围的虚线？\ \<a href=\"#\" onFocus=\"this.blur()\">\<img src=\"/blog/logo.jpg\" border=0>\</a>

24.电子邮件处理提交表单\ \<form name=\"form1\" method=\"post\" action=\"mailto:****@***.com\" enctype=\"text/plain\">\ \<input type=submit>\ \</form>

25.在打开的子窗口刷新父窗口的代码里如何写？\ window.opener.location.reload()

26.如何设定打开页面的大小\ \<body onload=\"top.resizeTo(300,200);\">\ 打开页面的位置\<body onload=\"top.moveBy(300,200);\">

27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动\ \<STYLE>\ body\ {background-image:url(/blog/logo.gif); background-repeat:no-repeat;\ background-position:center;background-attachment: fixed}\ \</STYLE>

28. 检查一段字符串是否全由数字组成\ \<script language=\"Javascript\">\\</script>

29. 获得一个窗口的大小\ document.body.clientWidth; document.body.clientHeight

30. 怎么判断是否是字符\ if (/[\^/x00-/xff]/g.test(s)) alert(\"含有汉字\");\ else alert(\"全是字符\");

31.TEXTAREA自适应文字行数的多少\ \<textarea rows=1 name=s1 cols=27 onpropertychange=\"this.style.posHeight=this.scrollHeight\">\ \</textarea>

32. 日期减去天数等于第二个日期\ \<script language=Javascript>\ 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. 选择了哪一个Radio\ \<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>\</HTML>

34.脚本永不出错\ \<SCRIPT LANGUAGE=\"JavaScript\">\ \\ \</SCRIPT>

35.ENTER键可以让光标移到下一个输入框\ \<input onkeydown=\"if(event.keyCode==13)event.keyCode=9\">

36. 检测某个网站的链接速度：\ 把如下代码加入\<body>区域中:\ \<script language=Javascript>\ tim=1\ setInterval(\"tim++\",100)\ 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=\"/blog/测试中......>\" =》\<input type=text\ name=url\"+i+\" size=40> =》\<input type=button value=GO

onclick=window.open(this.form.url\"+i+\".value)>\<br>\")\ document.write(\"\<input type=submit value=刷新>\</form>\")\ }\ butt()\ function auto(url)\ else

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://%22+autourl+\"\")>\")}\ run()\</script>

37. 各种样式的光标\ 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.页面进入和退出的特效\ 进入页面\<meta http-equiv=\"Page-Enter\" content=\"revealTrans(duration=x, transition=y)\">\ 推出页面\<meta http-equiv=\"Page-Exit\" content=\"revealTrans(duration=x, transition=y)\"> \ 这个是页面被载入和调出时的一些特效。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 竖条\ 23 以上22种随机选择一种

39.在规定时间内跳转\ \<META http-equiv=V=\"REFRESH\" content=\"5;URL=https://www.williamlong.info\">

40.网页是否被检索\ \<meta name=\"ROBOTS\" content=\"属性值\">\ 其中属性值有以下一些:\ 属性值为\"all\": 文件将被检索，且页上链接可被查询；\ 属性值为\"none\": 文件不被检索，而且不查询页上的链接；\ 属性值为\"index\": 文件将被检索；\ 属性值为\"follow\": 查询页上的链接；\ 属性值为\"noindex\": 文件不检索，但可被查询链接；\ 属性值为\"nofollow\": 文件不被检索，但可查询页上的链接。

最大化窗口？\ \<script language=\"JavaScript\">\ \\ \</script>

\ 解决问题：由于层与下拉框之间的优先级是：下拉框 > 层，因此在显示的时候，会因为优先级的次序而会出现如上问题。（如果几个元素都是层的话，我们可以通过层的 z-index 属性来设置）解决办法就是：给层中放一个优先级比下拉框更高的元素（iframe），从而解决此问题！具体解决代码如下：

\<div id=\"menu\" style=\"position:absolute; visibility:hidden; top:20px; left:20px; width:100px; height:200px; background-color:#6699cc;\">\ \<table>\ \<tr>\<td>item 1\</td>\</tr>\ \<tr>\<td>item 2\</td>\</tr>\ \<tr>\<td>item 3\</td>\</tr>\ \<tr>\<td>item 4\</td>\</tr>\ \<tr>\<td>item 5\</td>\</tr>\ \</table>\ \<iframe src=\"/blog/javascript:false\" style=\"position:absolute; visibility:inherit; top:0px; left:0px; width:100px; height:200px; z-index:-1; filter=\'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)\';\">\</iframe>\ \</div>

\<a href=\"#\" _fcksavedurl=\"\"#\"\" onclick=\"document.getElementById(\'menu\').style.visibility=\'visible\'\">menu\</a>

\<form>\ \<select>\<option>A form selection list\</option>\</select>\ \</form>

输入框也可以做的很漂亮了\ \<div align=\"center\">\<input type=\"hidden\" name=\"hao\" value=\"yes\">\ 外向数：\<input\ name=answer\ style=\"color: rgb(255,0,0); border-left: medium none; border-right: medium none; border-top: medium none; border-bottom: 1px solid rgb(192,192,192)\">\ 没回答的题数：\<input\ name=unanswer id=\"unanswer\"\ style=\"color: rgb(255,0,0); border-left: medium none; border-right: medium none; border-top: medium none; border-bottom: 1px solid rgb(192,192,192)\">\ \<br>\ 总得分:\ \<input\ name=score id=\"score\"\ style=\"color: rgb(255,0,0); border-left: medium none; border-right: medium none; border-top: medium none; border-bottom: 1px solid rgb(192,192,192)\">\ 结论:\ \<input\ name=xgjg id=\"xgjg\"\ style=\"color: rgb(255,0,0); border-left: medium none; border-right: medium none; border-top: medium none; border-bottom: 1px solid rgb(192,192,192)\">\ \<br>\ \<br>\ \ \<input onClick=processForm(this.form) style=\"FONT-FAMILY: 宋体; FONT-SIZE: 9pt\" type=button value=查看结果 name=\"button\">\ \<input type=\"reset\" name=\"Submit\" value=\"重做\">\ \</div>

\ 注意：修改\<body>为\<body onload=\"max.Click()\">即为打开最大

化窗口，而如果改为\<body onload=\"min.Click()\">就变为窗口一打开就最小化

\<object id=\"min\" type=\"application/x-oleobject\" classid=\"clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11\">\ \<param name=\"Command\" value=\"Minimize\">\ \</object> \<object id=\"max\" type=\"application/x-oleobject\" classid=\"clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11\">\ \<param name=\"Command\" value=\"Maximize\">\ \</object>\ \</body>

页面自动刷新（说明）

当你做网页时，是不是有的时候想让你的网页自动不停刷新，或者过一段时间自动跳转到另外一个你自己设定的页面？其实实现这个效果非常地简单，而且这个效果甚至不能称之为特效。你只要把如下代码加入你的网页中就可以了。

1，页面自动刷新：把如下代码加入\<head>区域中\<meta http-equiv=\"refresh\" content=\"20\">,其中20指每隔20秒刷新一次页面.

2，页面自动跳转：把如下代码加入\<head>区域中\<meta http-equiv=\"refresh\" content=\"20;url=https://www.williamlong.info\">,其中20指隔20秒后跳转到https://www.williamlong.info页面。

页面自动关闭

5000是指时间\<body onLoad=\"setTimeout(window.close, 5000)\">

弹出窗口自动关闭

10秒后弹出窗口自动关闭

注意：在新的tan.htm的body中要加 \<onLoad=\"closeit()\">\ head

\<script language=\"JavaScript\">

\<!--

var gt = unescape(\'%3e\');

var popup = null;

var over = \"Launch Pop-up Navigator\";

popup = window.open(\'\', \'popupnav\', \'width=225,height=235,resizable=1,scrollbars=auto\');

if (popup != null) {

if (popup.opener == null) {

popup.opener = self;

}

popup.location.href = \'tan.htm\';

}

// -->

\</script>\ \<body>注意：这段代码是在新建文件中的\ \<script language=\"JavaScript\">

function closeit()

\</script>

这个可不是\<iframe>(引用）呀。是直接调用的。以下代码加入\<body>区域

\<object type=\"text/x-scriptlet\" width=\"800\" height=\"1000\" data=\"../index.htm\">\ \</object>\

::: {#article_dig style="text-align: right"} []{#note193}顶一下 ▲}([]{#sdig193

) 踩一下 ▼}([]{#sdown193

) :::

::: {.previous_content} « 上一篇国内外经典语录 :::

::: {.next_content} 下一篇 » 路由默认密码集合 :::

提交表单后PHP不能获取提交内容

在HTML文件引入其它HTML文件的几种方法

中英文网页切换

IIS的ASP程序不能浏览的解决方法

自动打开最快镜像站

去掉免费空间广告的方法

WEBS上自动下载控件的实现方法

在 HTM 中插入文件

在ASP中切换NT系统用户权限

Category: 月光博客2005

Sun 10 July 2005

40种网页常用小技巧

相关文章