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

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正则表达式：

 var str = "123123";

 var reg = /123/;

 alert(reg.test(str));

上述js作用是检测 str 这一个字符串中是否包含123这样的字串。

进入正题，直接上代码(ExtJs使用的就是这种方式判断的)：

 <script type="text/javascript">

 var ua = navigator.userAgent.toLowerCase();

 function check(r)

 {

   return r.test(ua);

 }

 /**

  * return IE,IE6,IE7,IE8,IE9,Chrome,Firefox,Opera,WebKit,Safari,Others

 */

 function getBrowserName()

 {

   var browserName;

   var isOpera = check(/opera/);

   var isChrome = check(/chrome/);

   var isFirefox = check(/firefox/);

   var isWebKit = check(/webkit/);

   var isSafari = !isChrome && check(/safari/);

   var isIE = !isOpera && check(/msie/);

   var isIE7 = isIE && check(/msie 7/);

   var isIE8 = isIE && check(/msie 8/);

   if(isIE8)

   {

     browserName = "IE8";

   }else if(isIE7)

   {

     browserName = "IE7";

   }else if(isIE)

   {

     browserName = "IE";

   }else if(isChrome)

   {

     browserName = "Chrome";

   }else if(isFirefox)

   {

     browserName = "Firefox";

   }else if(isOpera)

   {

     browserName = "Opera";

   }else if(isWebKit)

   {

     browserName = "WebKit";

   }else if(isSafari)

   {

     browserName = "Safari";

   }else

   {

     browserName = "Others";

   }

   return browserName;

 }

 </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>

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

javascript有用小功能总结(未完待续)的更多相关文章

Javascript之换肤（未完待续）
这个项目我还没有完全写出来,先记录至此.感觉是方法不对,背景图片的切换方法有Problem.如若有一大神发现了我的文章,还望指导,吾将感激不尽.日后代码还会再钻研再改改. <head> & ...
linux 维护常见场景小命令（未完待续）
1.安装KDE桌面 [root@rhel06 ~]# yum -y groupinstall "X Windows System" "KDE Desktop" ...
关于DOM的一些总结（未完待续......）
DOM 实例1:购物车实例(数量,小计和总计的变化) 这里主要是如何获取页面元素的节点: document.getElementById("...") cocument.query ...
一篇文章让Oracle程序猿学会MySql【未完待续】
一篇文章让Oracle DB学会MySql[未完待续] 随笔前言: 本篇文章是针对已经能够熟练使用Oracle数据库的DB所写的快速学会MySql,为什么敢这么说,是因为本人认为Oracle在功能性方 ...
省钱版----查找 IoT 设备TTL线序__未完待续
作者:仙果原文来自:省钱版—-查找 IoT 设备TTL线序省钱版----查找 IoT 设备TTL线序__未完待续缘由在IoT固件调试分析的过程中,建议首先在IoT设备的板子上焊接调试线,这是能 ...
Go web编程学习笔记——未完待续
1. 1).GOPATH设置先设置自己的GOPATH,可以在本机中运行$PATH进行查看: userdeMacBook-Pro:~ user$ $GOPATH -bash: /Users/user/ ...
Reading | 《数字图像处理原理与实践（MATLAB版）》（未完待续）
目录一.前言 1.MATLAB or C++ 2.图像文件文件头调色板像素数据 3.RGB颜色空间原理坐标表示 4.MATLAB中的图像文件图像类型 image()函数 imshow() ...
构建Linux根文件系统（未完待续）
所谓制作根文件系统, 就是创建各种目录, 并且在里面创建各种文件. 比如在/bin ./sbin 目录下存放各种可执行程序, 在/etc 目录下存放配置文件, 在/lib 目录下存放库文件 ...
MVC丶 (未完待续······)
希望你看了此小随可以实现自己的MVC框架也祝所有的程序员身体健康一切安好 ...

随机推荐

【趣事】用 JavaScript 对抗 DDOS 攻击 (下)
上一篇:http://www.cnblogs.com/index-html/p/js-network-firewall.html 对抗 v2 之前的那些奇技淫巧,纯属娱乐而已,并不能撑多久. 但简单. ...
消息队列 Kafka 的基本知识及 .NET Core 客户端
前言最新项目中要用到消息队列来做消息的传输,之所以选着 Kafka 是因为要配合其他 java 项目中,所以就对 Kafka 了解了一下,也算是做个笔记吧. 本篇不谈论 Kafka 和其他的一些消息 ...
使用Visual Studio SDK制作GLSL词法着色插件
使用Visual Studio SDK制作GLSL词法着色插件我们在Visual Studio上开发OpenGL ES项目时,避免不了写Shader.这时在vs里直接编辑shader就会显得很方便. ...
iOS开发之App间账号共享与SDK封装
上篇博客<iOS逆向工程之KeyChain与Snoop-it>中已经提到了,App间的数据共享可以使用KeyChian来实现.本篇博客就实战一下呢.开门见山,本篇博客会封装一个登录用的SD ...
bzoj3932--可持久化线段树
题目大意: 最近实验室正在为其管理的超级计算机编制一套任务管理系统,而你被安排完成其中的查询部分.超级计算机中的任务用三元组(Si,Ei,Pi)描述,(Si,Ei,Pi)表示任务从第Si秒开始,在第 ...
Javascript学习笔记
Javascript 2016年12月19日整理 JS基础 Chapter1 JS是一门运行在浏览器客户端的脚本编程语言,前台语言组成部分 1. ECMAscript JS标准 2. DOM 通过J ...
ionic第一坑——ion-slide-box坑（ion-slide分两页的坑）
ionic.views.Slider = ionic.views.View.inherit({ initialize: function (options) { . . . function setu ...
github入门到上传本地项目【网上资源整合】
[在原文章的基础上,修改了描述的不够详细的地方,对内容进行了扩充,整合了网上的一些资料] [内容主要来自http://www.cnblogs.com/specter45/p/github.html#g ...
javaMail
JavaMail概述: JavaMail是由Sun定义的一套收发电子邮件的API,不同的厂商可以提供自己的实现类.但它并没有包含在JDK中,而是作为JavaEE的一部分. javaMai ...
分布式中使用Redis实现Session共享(二)
上一篇介绍了一些redis的安装及使用步骤,本篇开始将介绍redis的实际应用场景,先从最常见的session开始,刚好也重新学习一遍session的实现原理.在阅读之前假设你已经会使用nginx+i ...

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

javascript有用小功能总结(未完待续)的更多相关文章

随机推荐

热门专题