原文:一些有用的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. CentOS7 已安装telnet维修

    今天搞下 Centos 7 以下升级 openssl 和 openssh ,顺便说下安装 telnet # 设备 telnet 避 ssh 无法登录 yum -y install xinetd tel ...

  2. DDDLite的权限管理

    领域驱动设计实战—基于DDDLite的权限管理   在园子里面,搜索一下“权限管理”至少能得到上千条的有效记录.记得刚开始工作的时候,写个通用的权限系统一直是自己的一个梦想.中间因为工作忙(其实就是懒 ...

  3. 开源Math.NET基础数学类库使用(12)C#随机数扩展方法

    原文:[原创]开源Math.NET基础数学类库使用(12)C#随机数扩展方法                本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p ...

  4. LeetCode219:Contains Duplicate II

    Given an array of integers and an integer k, find out whether there there are two distinct indices i ...

  5. jquery：ajax不接收返回值回

    html页面a加元素的假设href=javasrcipt:void(0)会导致ajax没有收到回后台值. : <p class="chatmsg_load_more"> ...

  6. Linking pronunciation in English

    1.constant+vowel stand up give up get up 2.vowel+vowel 2.1 i:/i/ei/ai/oi [j] stay up carry it 2.2 u: ...

  7. 人迹罕至的android要完全退出程序的一种方法

    最近的一个项目,无意中发现了一个方法,使android要完全退出程序的一种方法,遥想当年,以便找到让的有效途径android遇险完全退出程序,我不由得有些感慨. 在这里,不敢独享.和大家分享一下,还启 ...

  8. vs2010模板修改

     使用visual studio 2010好久了,也遇到了不少问题,下面跟大家分享一些. 模板修改 说明: 主要工具: 以visual studio 2010作为例子,具体目录可能会根据不同的安装目录 ...

  9. Windows 怎么知道我已连线到网际网络? 原来当中大有文章!

    原文 Windows 怎么知道我已连线到网际网络? 原来当中大有文章! 标题这个问题好像很简单, 但原来深入研究起来还真的不是”因为我能看到网页嘛”这样简单的答案. 研究这个课题是由于公司内部的防火墙 ...

  10. Qt Mac 在软件 icns图标制作

    1.首先,下载一个电话Icon Composer软件 之前Xcode像这个东西,现在,我不知道有或无,迷茫,一世Xcode很少. Icon Composer是苹果出的. 下载地址: http://ww ...