原文:一些有用的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. Directx11学习笔记【十二】 画一个旋转的彩色立方体

    上一次我们学习了如何画一个2D三角形,现在让我们进一步学习如何画一个旋转的彩色立方体吧. 具体流程同画三角形类似,因此不再给出完整代码了,不同的部分会再说明. 由于我们要画彩色的立方体,所以顶点结构体 ...

  2. 乐在其中设计模式(C#) - 观察者模式(Observer Pattern)

    原文:乐在其中设计模式(C#) - 观察者模式(Observer Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 观察者模式(Observer Pattern) 作者:weba ...

  3. [渣译文] SignalR 2.0 系列： SignalR 自托管主机

    原文:[渣译文] SignalR 2.0 系列: SignalR 自托管主机 英文渣水平,大伙凑合着看吧…… 这是微软官方SignalR 2.0教程Getting Started with ASP.N ...

  4. Hibernate-----5、持久化对象

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGVrZXdhbmd6aQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  5. jq实现图像旋转木马:轮焦点+关于控制+自己主动旋转木马

    资源:http://www.ido321.com/862.html html代码: 1: <!DOCTYPE html> 2: <html lang="en"&g ...

  6. [原创].NET 分布式架构开发实战五 Framework改进篇

    原文:[原创].NET 分布式架构开发实战五 Framework改进篇 .NET 分布式架构开发实战五 Framework改进篇 前言:本来打算这篇文章来写DAL的重构的,现在计划有点改变.之前的文章 ...

  7. Android开发技巧——PagerAdapter再简单的包

    再次内容View的ViewPager该适配器PagerAdapter简包,支持List数据与SparseArray数据.随着更新的浏览功能. 首先,首先贴上顶部抽象类代码: /* * Date: 14 ...

  8. RH133读书笔记(6) - Lab 6 Adding New Filesystems to the Filesystem Tree

    Lab 6 Adding New Filesystems to the Filesystem Tree Goal: Develop skills and knowlege related to par ...

  9. Struts2 拦截器—拦截action

    对于拦截器的基本使用这里我就懒得打字了,我这里就讲下如何用 Struts2 拦截器 拦截action.这是我个人的想法,如果有什么不对的,或者你们有什么更好的方法.请多多留言! 拦截器的默认拦截的方法 ...

  10. JAVA 跑马灯文字效果

    JAVA跑马灯文字效果的实现: 1. 首先创建一个继承JFrame类的HorseRaceLightTextFrame窗体类,代码如下: package com.example.horseracelig ...