原文:一些有用的javascript实例分析(一)

本文以http://fgm.cc/learn/链接的实例索引为基础，可参见其实际效果。分析和整理了一些有用的javascript实例，相信对一些初学者有一定的帮助。本人水平有限，有许多不足的地方还望包涵，指正。废话不多说，正文以代码开始，不在代码中死去，就在代码中重生。不经历码农，如何来做攻城狮。

 1 控制div属性

 //参数为对象，样式属性和值

 var changeStyle=function(elem,attr,value){

     elem.style[attr]=value

 };

 window.onload = function ()

 {

     var oBtn = document.getElementsByTagName("input");

     var oDiv = document.getElementById("div1");

     var oAtt = ["width","height","background","display","display"];

     var oVal = ["200px","200px","red","none","block"];

     for(var i=0,l=obtn.length;i<l;i++){

         oBtn[i].index=i;

         oBtn[i].onclick=function(){

             //这里用this来获取i值原理是什么？好像都用闭包传值，

             //this.index已经是onclick的局部变量了

             //若索引值是4重置，则执行后面括号的内容(初始状态)。若不是则后面括号不执行

             this.index==l-1&&(oDiv.style.cssText="");

             changeStyle(oDiv,oAtt[this.index],oVal[this.index]);

         }

     }

 <body>

 <div id="outer">

 <input type="button" value="变宽" />

 <input type="button" value="变高" />

 <input type="button" value="变色" />

 <input type="button" value="隐藏" />

 <input type="button" value="重置" />

 <div id="div1"></div>

 </div>

 </body>    

 2 鼠标移入和移除样式改变

 window.onload = function ()

 {

     var oDiv = document.getElementById("div1");

     //在css先设置好不同的样式，通过改变样式类名来改变效果。

     oDiv.onmouseover = function ()

     {

         oDiv.className = "hover"

     };

     oDiv.onmouseout = function ()

     {

         oDiv.className = ""

     }

 };

 <body>

 <div id="div1">鼠标移入改变样式，鼠标移出恢复。</div>

 </body>

 3 记住密码提示框

 window.onload = function ()

 {

     var oTips = document.getElementById("tips");

     var oLabel = document.getElementsByTagName("label")[0];

     //这种提示功能通过鼠标的划入和划出，来改变预定好样式的显示和隐藏。以达到视觉效果的改变

     oLabel.onmouseover=function(){

         oTips.style.display="block";

     };

     oLabel.onmouseout=function=function(){

         oTips.style.display="none";

     }

 }

 <div id="outer">

     <label><input type="checkbox" />两周内自动登陆</label>

     <div id="tips">为了您的信息安全，请不要在网吧或公用电脑上使用此功能！</div>

 </div>

 4 百度输入法

 window.onload = function ()

 {

     var oBtn = document.getElementsByTagName("button")[0];

     var oIme = document.getElementById("ime");

     var oClose = document.getElementById("close");

     var style = oIme.style;

     oBtn.onclick=function(){

         //先执行判断再赋值，点击时若显示则隐藏，若隐藏则显示。这个?判断起到了切换的作用，保证效果不中断

         style.display=style.display=="block"?"none":"block";

     };

     oBtn.onclick=function(){

         style.display="none";

     }

 }

 <body>

 <div id="outer">

     <button>输入法</button>

     <ul id="ime">

         <li><a href="javascript:;">手写</a></li>

         <li><a href="javascript:;">拼音</a></li>

         <li id="close"><a href="javascript:;">关闭</a></li>

     </ul>

 </div>

 </body>

一些有用的javascript实例分析(一)的更多相关文章

  1. 一些有用的javascript实例分析(三)

    原文:一些有用的javascript实例分析(三) 10 输入两个数字,比较大小 window.onload = function () { var aInput = document.getElem ...

  2. 一些有用的javascript实例分析(二)

    原文:一些有用的javascript实例分析(二) 5 求出数组中所有数字的和 window.onload = function () { var oBtn = document.getElement ...

  3. C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断

    C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...

  4. [转载]JavaScript内存分析

    https://github.com/CN-Chrome-DevTools/CN-Chrome-DevTools/blob/master/md/Performance-Profiling/javasc ...

  5. (转)实例分析：MySQL优化经验

    [IT专家网独家]同时在线访问量继续增大,对于1G内存的服务器明显感觉到吃力,严重时甚至每天都会死机,或者时不时的服务器卡一下,这个问题曾经困扰了我半个多月.MySQL使用是很具伸缩性的算法,因此你通 ...

  6. nodejs的模块系统（实例分析exprots和module.exprots）

    前言:工欲善其事,必先利其器.模块系统是nodejs组织管理代码的利器也是调用第三方代码的途径,本文将详细讲解nodejs的模块系统.在文章最后实例分析一下exprots和module.exprots ...

  7. MapReduce多种join实现实例分析（二）

    上一篇<MapReduce多种join实现实例分析(一)>,大家可以点击回顾该篇文章.本文是MapReduce系列第二篇. 一.在Map端进行连接使用场景:一张表十分小.一张表很大.用法: ...

  8. mvc结合web应用实例分析

    Mvc的web应用实例分析 Login.jsp——视图部分的输入文件success.jsp——视图部分的输出文件failure.jsp——视图部分的输出文件LoginBean.java——模型部分Lo ...

  9. Linux Kernel PANIC(三)--Soft Panic/Oops调试及实例分析【转】

    转自:https://blog.csdn.net/gatieme/article/details/73715860 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原 ...

随机推荐

  1. 采用Eclipse中间Maven构建Web项目错误（一）

    采用Eclipse中间Maven构建Web工程 1.在进行上述操作时.pom.xml一直报错 <project xmlns="http://maven.apache.org/POM/4 ...

  2. Agile/CMMI/Scrum

    Agile/CMMI/Scrum 一.背景介绍 在朋友(aehyok)的建议下,初步去了解Visual Studio Online,简称VS Online(即原来的 Team Foundation S ...

  3. 答读者问(8)：相关Java问题涉及到学习

    近来的,我收到一个研究生朋友的电子邮件,一般内容如下面: 日 (本人微博:http://weibo.com/zhouzxi?topnav=1&wvr=5,我们的聊天号码:245924426.欢 ...

  4. redis client protocol 分解

    在官方网站http://redis.io/topics/protocol我们必须redis通信协议做说明. 根据以下某些原因.我想解决redis client protocol: 1.足够了解通信协议 ...

  5. HPUX在oracle10g安装和卸载缩写

    创作品,出自 "深蓝的blog" 博客,欢迎转载,转载时请务必注明出处.否则追究版权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanlong/ ...

  6. C#内存分配学习

    CLR内存分配分三大块区域:栈.GC堆.大对象堆. 一.线程堆栈(栈) 用于分配值类型实例.栈由操作系统进行管理,不受GC管理,当值类型不在其作用域(主要是指其所在函数内)时,其所占栈空间自动释放.栈 ...

  7. VMWARE虚拟机无法访问的三种方法分析

    bridged(桥接模式). NAT(网络地址转换模式) host-only(主机模式). 理论认识: 1.bridged(桥接模式) 在这个地方模式.虚拟机等同于网络内的一台物理主机,可对手动设置I ...

  8. Ehcache详细解读（转）

    Ehcache 是现在最流行的纯Java开源缓存框架,配置简单.结构清晰.功能强大,最初知道它,是从Hibernate的缓存开始的.网上中文的EhCache材料 以简单介绍和配置方法居多,如果你有这方 ...

  9. OCEANIAERP对接-code盘点机并存储实时库存计划和方案的使用，实时库存，云清查方案

    1.     PDA手持设备按键说明 [Tab]键:使输入焦点在控件上切换. [ESC]键:弹出是否退出确认对话框,退出操作界面或程序. [OK]键:确认输入或选择,进入下一步操作. [C]键:删除键 ...

  10. Path和ClassPath差异

    1.Path角色 Path它用于指定Java路径的命令,当我们想编译Java当需要使用的程序javac.exe并运行.class当文件需要使用java.exe,此时Path设置的路径就发生作用了.由于 ...