javascript有用小功能总结(未完待续)

1)javascript让页面标题滚动效果

代码如下：

<title>您好，欢迎访问我的博客</title>
<script type="text/javascript">
functionscroll() {//获取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中是eif((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>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>背景自动变色</title><scripttype="text/javascript">varArraycolor= newArray("#00FF66","#FFFF99","#99CCFF","#FFCCFF","#FFCC99","#00FFFF","#FFFF00","#FFCC00","#FF00FF");varn= 0;functionturncolors(){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 functioncheck(r)4 {5   returnr.test(ua);6 }7 /**8 * return IE,IE6,IE7,IE8,IE9,Chrome,Firefox,Opera,WebKit,Safari,Others9 */
10 functiongetBrowserName()11 {12   varbrowserName;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   returnbrowserName;50 }51 </script>

简易方法判断浏览器的类型和版本

7)JavaScript调用客户端的可执行文件

<script type="text/javascript">
<!--打开记事本程序-->
functionopenNotepad()
{var wsh=new ActiveXObject("wscript.shell")wsh.run("notepad.exe")//如果在“运行”可以运行就可以在此直接写，否则要写上绝对路径
}<!--打开计算器程序-->
functionopenCalc()
{var wsh=new ActiveXObject("wscript.shell");wsh.run("calc.exe");
}<!--打开指定位置文件-->
functionopenFile(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>

未完待续，慢慢补充...

转载于:https://www.cnblogs.com/Scl891004X/p/6196025.html

javascript有用小功能总结(未完待续)相关推荐

natas通关小游戏（未完待续）
地址:http://overthewire.org/wargames/natas/ level 0 -> level 1 You can find the password for the ne ...
5G网络学习（二）——UPF用户平面功能（未完待续）
上节介绍了5G网络部署及架构,感兴趣的同学可以看下 5G网络部署及架构接下来我们介绍一下5G网络架构中一个重要的部分----UPF(用户平面功能) UPF是3GPP核心网系统架构的重要组成部分,主要 ...
python的简单实用小工具（未完待续......）
在python进行自动化编写的过程中,常常需要造一些数据,比如,获取随机的合法IP,随机的字符串,当前的时间等,下面的一些方法应该可以用到,希望对你有所帮助 #!/user/bin/env pytho ...
pythonb超分辨成像_Papers | 超分辨 + 深度学习（未完待续）
1. SRCNN 1.1. Contribution end-to-end深度学习应用在超分辨领域的开山之作(非 end-to-end 见 Story.3 ). 指出了超分辨方向上传统方法( spar ...
《图解 HTTP》读书笔记（未完待续）
ARP 协议(Address Resolution Protocol)一种以解析地址的协议,根据通信双方的 IP 地址就可以查出对应的 MAC 地址. MAC( Media Access Contro ...
学习前端的实用网站——未完待续
学习前端的实用网站--未完待续一.学习类网站 1.视频教程 2.技术分享 3.大牛博客 4.参考手册二.功能类网站 1.颜色 2.图标 3.字体 4.素材三.辅助类网站一.学习类网站 1.视频 ...
linux引数列项目过长,Linux 命令个人总结====== 未完待续个人认为比较重要
Linux 命令个人总结====== 未完待续 man [功能说明]: 查看帮助 [语法格式]: man [123456789]命令.文件. [选项参数]: 数字"1"表示用户命令 ...
学完oracle 再学mysql_一篇文章让Oracle程序猿学会MySql【未完待续】
一篇文章让Oracle DB学会MySql[未完待续] 随笔前言: 本篇文章是针对已经能够熟练使用Oracle数据库的DB所写的快速学会MySql,为什么敢这么说,是因为本人认为Oracle在功能性方 ...
Android仿朋友圈照片定点放大和滑动查看（未完待续）
最近公司的项目中有一个图片加载和查看功能实现,具体是说通过列表项加载小图片,点击放大图片并且可以左右翻页,放缩等等,类似于微信朋友圈的照片墙功能.拿到这个需求后我想了想,图片列表首选当然是Recycl ...

javascript有用小功能总结(未完待续)

javascript有用小功能总结(未完待续)相关推荐

最新文章

热门文章