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

时间：2023-01-29 16:44:14

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有用小功能总结(未完待续)的更多相关文章

  1. Javascript之换肤（未完待续）

    这个项目我还没有完全写出来,先记录至此.感觉是方法不对,背景图片的切换方法有Problem.如若有一大神发现了我的文章,还望指导,吾将感激不尽.日后代码还会再钻研再改改. <head> & ...

  2. linux 维护常见场景小命令 （未完待续）

    1.安装KDE桌面 [root@rhel06 ~]# yum -y groupinstall "X Windows System" "KDE Desktop" ...

  3. 关于DOM的一些总结（未完待续&period;&period;&period;&period;&period;&period;）

    DOM 实例1:购物车实例(数量,小计和总计的变化) 这里主要是如何获取页面元素的节点: document.getElementById("...") cocument.query ...

  4. 一篇文章让Oracle程序猿学会MySql【未完待续】

    一篇文章让Oracle DB学会MySql[未完待续] 随笔前言: 本篇文章是针对已经能够熟练使用Oracle数据库的DB所写的快速学会MySql,为什么敢这么说,是因为本人认为Oracle在功能性方 ...

  5. 省钱版----查找 IoT 设备TTL线序&lowbar;&lowbar;未完待续

    作者:仙果 原文来自:省钱版—-查找 IoT 设备TTL线序 省钱版----查找 IoT 设备TTL线序__未完待续 缘由 在IoT固件调试分析的过程中,建议首先在IoT设备的板子上焊接调试线,这是能 ...

  6. Go web编程学习笔记——未完待续

    1. 1).GOPATH设置 先设置自己的GOPATH,可以在本机中运行$PATH进行查看: userdeMacBook-Pro:~ user$ $GOPATH -bash: /Users/user/ ...

  7. Reading &vert; 《数字图像处理原理与实践（MATLAB版）》（未完待续）

    目录 一.前言 1.MATLAB or C++ 2.图像文件 文件头 调色板 像素数据 3.RGB颜色空间 原理 坐标表示 4.MATLAB中的图像文件 图像类型 image()函数 imshow() ...

  8. 构建Linux根文件系统（未完待续）

          所谓制作根文件系统, 就是创建各种目录, 并且在里面创建各种文件. 比如在/bin ./sbin 目录下存放各种可执行程序, 在/etc 目录下存放配置文件, 在/lib 目录下存放库文件 ...

  9. MVC丶 &lpar;未完待续&&num;183&semi;&&num;183&semi;&&num;183&semi;&&num;183&semi;&&num;183&semi;&&num;183&semi;&rpar;

         希望你看了此小随 可以实现自己的MVC框架     也祝所有的程序员身体健康一切安好                                                     ...

随机推荐

  1. IIS7&period;5上的REST服务的Put操作发生HTTP Error 405&period;0 - Method Not Allowed 解决方法

    WebDAV 是超文本传输协议 (HTTP) 的一组扩展,为 Internet 上计算机之间的编辑和文件管理提供了标准.利用这个协议用户可以通过Web进行远程的基本文件操作,如拷贝.移动.删除等.在I ...

  2. Linux下安装配置Nexus

    一.安装和运行nexus 1.下载nexus:http://www.sonatype.org/nexus/go 可选择tgz和zip格式,以及war,选择tgz或zip时不同版本可能在启动时存在一定问 ...

  3. JAVA TCP网络编程学习笔记

    一.JAVA网络编程概述 网络应用程序,就是在已实现网络互联的不同计算机上运行的应用程序,这些程序之间可以相互交换数据.JAVA是优秀的网络编程语言,Java网络编程的类库位于java.net包中.J ...

  4. Deep learning：三十四&lpar;用NN实现数据的降维&rpar;

    数据降维的重要性就不必说了,而用NN(神经网络)来对数据进行大量的降维是从2006开始的,这起源于2006年science上的一篇文章:reducing the dimensionality of d ...

  5. shell变量数学运算

    shell变量数学运算 #!/bin/sh # 本脚本说明shell脚本中变量运算的用法 # 错误的用法var=1var=$var+1echo $var 输出:1+1 # 第一种用法,letvar=1 ...

  6. 淘宝NPM源的使用

    npm作为国外的node仓库安装工具,自然会受到我大长城防火墙的干扰,国内用户在安装相关的资源的时候,会出现安装失败,以及速度很慢的情况.为了解决npm安装的问题,国内出现了很多npm的镜像网址,ta ...

  7. Problem &colon; 1412 &lpar; &lbrace;A&rcub; &plus; &lbrace;B&rcub; &rpar;

    //集合中元素是不会重复的,所以完全没有必要将两个集合合并后再进行排序,交换排序的时间效率是O(n^2),将两个集合中的元素分别排序后输出即可.输出格式也非常需要 //注意的.输出一列元素赢以cout ...

  8. 【BZOJ】4008&colon; &lbrack;HNOI2015&rsqb;亚瑟王

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=4008 这题主要在于:先算概率,再算期望! 一轮一轮的计算似乎很复杂,每一轮它其实是可以看作 ...

  9. jumpserver修改默认管理员账号名

    1.安装完毕jumpserver之后,默认管理员账号为admin 显然类似windows的administrator以及linux的root 把账号名改成别的 个人信息界面点击设置 修改为自己想要的用 ...

  10. Java - 26 Java 数据结构

    Java 数据结构 Java工具包提供了强大的数据结构.在Java中的数据结构主要包括以下几种接口和类: 枚举(Enumeration) 位集合(BitSet) 向量(Vector) 栈(Stack) ...

相关文章