原文:一些有用的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. C++笔试面试总结

    手游广州某公司书面今天接受采访时.刚进去中午1中场休息.他们公司谁刚刚醒来,一个冷漠打牌,然后去上班.瞬间,这些公司有没有什么好印象,压抑. 接着快2点的时候.发了一份笔试题.大部分题目均在网上的&l ...

  2. java基础程序题

    发现自己初学java时保存在word里的练习题,哈哈,放博客里面来作为纪念吧~~~ [程序1]  题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第四个月后每个月又生一对兔 ...

  3. 经excel要将数据库（ORACLE)要插入数据

    大家都知道PL/SQL可以excel数据复制.我们也可以通过相同excel将数据插入到数据库. 下面我们就来简单的样品,并与主题演示 首先,我们创建了一个表test CREATE TABLE test ...

  4. AndroidAnnotations说明—AndroidAnnotations它是如何工作的？

    AndroidAnnotations它的工作原理很easy,它使用标准java注塑加工工具,自己主动加她一个额外的步骤生成源代码编译.         源代码是什么?每个增强的类.比方每个用@EAct ...

  5. html 格式的email 编辑

    本篇文章只讲如何编辑html格式的email 模板,并不讲述如何用程序发送email. 1.做email的重要思想:“复古” 抛弃现代化的div+css技术,回到html4.0+table的时代.少用 ...

  6. HTML基本介绍

    html 即 超文本标记语言 ,即标准通用标记语言下的一个应用. "超文本"就是指页面内能够包括图片.链接.甚至音乐.程序等非文字元素.超文本标记语言的结构包括"头&qu ...

  7. BZOJ 2431 HAOI2009 在列的数目的顺序相反 递归

    标题效果:乞讨1~n有都布置在物种的数目相反的顺序k计划数 订购f[i][j]对于前者i原子的反向排列的数j计划数 因此,我们将第一i插入的数1~i-1该装置 能生产0~i-1反向对 再就是 f[i] ...

  8. Apidemos--&gt;Views-Lists-Cursor(people)学�

    Apidemos-->Views-Lists-Cursor(people)-主要用到了获取手机联系人信息,属于内容提供者的范畴,要想了解这方面的内容,能够參考官方docs /sdk/docs/g ...

  9. 【C语言探索之旅】 第一部分第六课：条件表达式

    内容简介 1.课程大纲 2.第一部分第六课:条件表达式 3.第一部分第七课预告:循环语句 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C语言编写三个游戏. ...

  10. [ACM] POJ 3686 The Windy&#39;s (二分图最小权匹配，KM算法，特殊建图）

    The Windy's Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 4158   Accepted: 1777 Descr ...