原文:一些有用的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. effective c++ 条款26 postpone variable definition as long as possible

    因为构造和析构函数有开销,所以也许前面定义了,还没用函数就退出了. 所以比较好的方法是用到了才定义.

  2. Xamarin.Android 在VS下调试时提示 In mgmain JNI_OnLoad 程序“Mono”已退出 解决办法

    原因是使用了破解版的 Xamarin,调试时不能使用共享库

  3. S如何解决安卓DK无法下载Package问题

    安装一些用户Android SDK后.打开Android SDK Manager下载API当总是显示"Done loading packages"却迟迟不能前进.自己也出现了这样的 ...

  4. Everything中文绿色版在Win7/8/10用不了问题的图文教程,只显示盘符

    打开Everything后点击菜单上的“工具”——“选项” 勾选 Everything Service 后,点应用 需要用到管理者权限

  5. 构建安全的Xml Web Service系列之SSL篇

    原文:构建安全的Xml Web Service系列之SSL篇 首先介绍一下SSL, SSL 的英文全称是 "Secure Sockets Layer" ,中文名为 "安全 ...

  6. 【世外桃源】福音节目 swtychina.com

    [世外桃源]福音节目 今天小编满怀热情,带着激动地心情,颤抖的双手,以“大无畏的精神,高山仰止的情操”为大家郑重推荐很好的一个福音节目: <世外桃源>, 哎,不对,貌似从2013年初开始& ...

  7. ASP.NET自定义控件组件开发 第一章 第三篇

    原文:ASP.NET自定义控件组件开发 第一章 第三篇 第三篇:第一章的完结篇 系列文章链接: ASP.NET自定义控件组件开发 第一章 待续 ASP.NET自定义控件组件开发 第一章 第二篇 接着待 ...

  8. UVA 11992 - Fast Matrix Operations(段树)

    UVA 11992 - Fast Matrix Operations 题目链接 题意:给定一个矩阵,3种操作,在一个矩阵中加入值a,设置值a.查询和 思路:因为最多20列,所以全然能够当作20个线段树 ...

  9. Vertica: 基于DBMS架构的列存储数据仓库

    介绍 Vertica(属于HP公司),是一个基于DBMS架构的数据库系统,适合读密集的分析型数据库应用,比方数据仓库,白皮书中全名称为VerticaAnalytic Database.从命名中也可以看 ...

  10. Cocos2d-x 单点触摸--让我们用手指动起来的精灵

    转载请注明出处:http://blog.csdn.net/oyangyufu/article/details/25656673 效果图: CCTouch类装载了触摸点的信息.包含触摸点的横纵坐标值和触 ...