1)javascript让页面标题滚动效果
代码如下：
<title>您好，欢迎访问我的博客</title> <script type="text/javascript"> function scroll() { //获取title信息。 var titleInfo = document.title; //获取title第一个字符（数字、字母）。 //注释：字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串。 var firstInfo = titleInfo.charAt(0); //获取第二位到最后的信息。 var lastInfo = titleInfo.substring(1, titleInfo.length); //拼接输出信息 document.title = lastInfo + firstInfo; } //使用setInterval()方法，每隔0.5s执行 setInterval("scroll()", 500); </script>
2)屏蔽鼠标右键(for IE8&IE10，其它IE版本或浏览器有待验证)
<script type="text/javascript"> //屏蔽鼠标右键 document.oncontextmenu = function() { event.returnValue = false; } </script>
3)回车键执行目标脚本
假如页面中有个LinkButton做的查询按钮(ID为lbtSearch)，回车键实现查询，代码如下：
<script type="text/javascript"> //回车键实现查询 document.onkeydown = function(e) { if(!e) e = window.event;//IE中是window.event，Firefox中是e if((e.keyCode || e.which) == 13) { var obj = document.getElementById("lbtSearch"); obj.click(); } } </script>
4)屏蔽退格键(BackSpace)，for IE
代码如下：
<script type="text/javascript"> //屏蔽退格键 document.onkeydown = function() { if(event.keyCode == 8) { if((event.srcElement.tagName.toLowerCase() == "input" || event.srcElement.tagName.toLowerCase() == "textarea") && event.srcElement.isContentEditable == false) { event.returnValue = false; } } } </script>
这里我用的是tagName作元素类型筛选，也可以用type作类型筛选( event.srcElement.type == "text" || event.srcElement.type == "password" || event.srcElement.type == "textarea" )
5)背景自动变色
代码如下：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>背景自动变色</title> <script type="text/javascript"> var Arraycolor = new Array("#00FF66", "#FFFF99", "#99CCFF", "#FFCCFF", "#FFCC99", "#00FFFF", "#FFFF00", "#FFCC00", "#FF00FF"); var n = 0; function turncolors() { n++; if (n == (Arraycolor.length - 1)) n = 0; document.bgColor = Arraycolor[n]; setTimeout("turncolors()", 1000); } turncolors(); </script> </head> <body> <p>背景自动变色</p> </body> </html>
6)简易方法判断浏览器的类型和版本
如何判断浏览器的类型和版本？使用JavaScript的内置对象 navigator 的属性userAgent的值来判断(navigator.userAgent)。
navigator是javascript的内置对象，通常用于检测浏览器与操作系统的版本。 常用的属性有：
- appCodeName -- 浏览器代码名的字符串表示
- appVersion -- 浏览器版本信息的字符串表示
- cookieEnabled -- 如果启用cookie返回true，否则返回false
- javaEnabled -- 如果启用java返回true，否则返回false
- platform -- 浏览器所在计算机平台的字符串表示
- plugins -- 安装在浏览器中的插件数组
- taintEnabled -- 如果启用了数据污点返回true，否则返回false
- userAgent -- 用户代理头的字符串表示（就是包含浏览器版本信息等的字符串）
下面说明一段js正则表达式：
1 var str = "123123"; 2 var reg = /123/; 3 alert(reg.test(str));
上述js作用是检测 str 这一个字符串中是否包含123这样的字串。
进入正题，直接上代码(ExtJs使用的就是这种方式判断的)：
1 <script type="text/javascript"> 2 var ua = navigator.userAgent.toLowerCase(); 3 function check(r) 4 { 5 return r.test(ua); 6 } 7 /** 8 * return IE,IE6,IE7,IE8,IE9,Chrome,Firefox,Opera,WebKit,Safari,Others 9 */ 10 function getBrowserName() 11 { 12 var browserName; 13 var isOpera = check(/opera/); 14 var isChrome = check(/chrome/); 15 var isFirefox = check(/firefox/); 16 var isWebKit = check(/webkit/); 17 var isSafari = !isChrome && check(/safari/); 18 var isIE = !isOpera && check(/msie/); 19 var isIE7 = isIE && check(/msie 7/); 20 var isIE8 = isIE && check(/msie 8/); 21 if(isIE8) 22 { 23 browserName = "IE8"; 24 }else if(isIE7) 25 { 26 browserName = "IE7"; 27 }else if(isIE) 28 { 29 browserName = "IE"; 30 }else if(isChrome) 31 { 32 browserName = "Chrome"; 33 }else if(isFirefox) 34 { 35 browserName = "Firefox"; 36 }else if(isOpera) 37 { 38 browserName = "Opera"; 39 }else if(isWebKit) 40 { 41 browserName = "WebKit"; 42 }else if(isSafari) 43 { 44 browserName = "Safari"; 45 }else 46 { 47 browserName = "Others"; 48 } 49 return browserName; 50 } 51 </script>
7)JavaScript调用客户端的可执行文件
<script type="text/javascript"> <!--打开记事本程序--> function openNotepad() { var wsh=new ActiveXObject("wscript.shell") wsh.run("notepad.exe")//如果在“运行”可以运行就可以在此直接写，否则要写上绝对路径 } <!--打开计算器程序--> function openCalc() { var wsh=new ActiveXObject("wscript.shell"); wsh.run("calc.exe"); } <!--打开指定位置文件--> function openFile(file) { var wsh=new ActiveXObject("wscript.shell"); wsh.run(file); } </script> <input type="button" id="notepad" value="Notepad" onclick="openNotepad();" /> <input type="button" id="calc" value="calc" onclick="openCalc();" /> <input type="button" id="file" value="file" onclick="openFile('c://test.txt');" />
8)js页面跳转及刷新(本页面、父页面、最外层页面)
下面为大家分享下不同页面之家的跳转问题，有需要的朋友可以参考下。
"window.location.href"、"location.href"是本页面跳转
"parent.location.href"是上一层页面跳转
"top.location.href"是最外层的页面跳转
举例说明：A,B,C,D都是jsp，D是C的iframe，C是B的iframe，B是A的iframe，如果D中js这样写
"window.location.href"、"location.href"：D页面跳转
"parent.location.href"：C页面跳转
"top.location.href"：A页面跳转
注意：如果D页面中有form的话，则
<form>: form提交后D页面跳转
<form target="_blank">: form提交后弹出新页面
<form target="_parent">: form提交后C页面跳转
<form target="_top"> : form提交后A页面跳转
关于页面刷新，D页面中这样写：
"location.reload();": 本页面刷新
"parent.location.reload();": C页面刷新(当然也可用子窗口的opener对象来获得父窗口的对象：window.opener.document.location.reload();)
"top.location.reload();": A页面刷新
<script type="text/javascript"> // 解决session过期后跳到login页面却跳不出html frameset框架的问题 if (window != top) { top.location.href = location.href; } </script>
未完待续，慢慢补充...