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

最新推荐文章于 2024-06-10 22:18:41 发布

weixin_30815469

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量139

点赞数

文章标签： javascript xhtml shell ViewUI

原文链接：http://www.cnblogs.com/Scl891004X/p/6196025.html

版权

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>

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

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

weixin_30815469

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript有用小功能总结(未完待续)

1)javascript让页面标题滚动效果代码如下：<title>您好，欢迎访问我的博客</title> <script type="text/javascript"> function scroll() { //获取title信息。 var titleInfo = document.title; //获取title第一个字符（数...
复制链接

扫一扫