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

 5 求出数组中所有数字的和

 window.onload = function ()

 {

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

     var oInput = document.getElementsByTagName("input")[0]

     var oStrong = document.getElementsByTagName("strong")[0];

     oInput.onkeyup=function(){

         //用空白替换非数字和逗号

         this.value=this.value.replace(/[^(\d)|(,)]/,"");

     };

     oBtn.onclick=function(){

         var sum=0;

         //将输入的值以逗号为分隔符，转化为字符数组

         var oInput=document.getElementsByTagName("input")[0].value.split(",")

         for(var i in oInput){

             //把字符型转化为整型

             sum=parseInt(oInput[i]);

         }

     };

     oStrong.innerHTML=sum;

 }

 6 简易选项卡

 window.onload = function ()

 {   //获取标题

     var oLi = document.getElementById("tab").getElementsByTagName("li");

     //获取内容

     var oUl = document.getElementById("content").getElementsByTagName("ul");

     for(var i=0;i<oLi.length;i++){

         oLi[i].index=i;

         //滑动到指定标题

         oLi[i].onmouseover = function (){

         for(var n=0;n<oLi.length;n++){

             //首先使所有标题样式都不变

             oLi[n].className="";

             //指定标题样式改变，this指代oLi[i]

             this.className="current";

         }

         for(var n=0;n<oUl.length;n++){

             //所有的内容都不显示(实现无缝)

             oUl[n].style.display="";

             //指定标题对应的内容显示

             oUl[this.index].style.display="block"

         }    

     }

 }

 }

  div id="outer">

     <ul id="tab">

         <li class="current">第一课</li>

         <li>第二课</li>

         <li>第三课</li>

     </ul>

     <div id="content">

         <ul style="display:block;">

             <li>网页特效原理分析</li>

             <li>响应用户操作</li>

         </ul>

         <ul>

             <li>戛纳印象效果</li>

             <li>数组</li>

             <li>字符串连接</li>

         </ul>

         <ul>

             <li>JavaScript组成：ECMA来源</li>

             <li>JavaScript出现的位置、优缺点</li>

         </ul>

     </div>

 </div>

 </body>

 7 单一按钮显示/隐藏

 window.onload = function ()

 {

     var oH2 = document.getElementsByTagName("h2")[0];

     var oUl = document.getElementsByTagName("ul")[0];

     oH2.onclick=function(){

         var style=oUl.style;

         //内容在显示和隐藏之间切换

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

         //标题栏的图标随下拉框的改变而改变（background-position）

         oH2.className=style.display=="none"?"open":""

     }

 <body>

 <div id="outer">

     <h2>播放列表...</h2>

     <ul>

         <li><a href="javascript:;">玩家之徒 - 蔡依林</a></li>

         <li><a href="javascript:;">原谅我就是 - 戴佩妮</a></li>

     </ul>

 </div>

 </body>

 8鼠标移过，改变图片路径

 window.onload = function ()

 {

     var oImg = document.getElementById("box").getElementsByTagName("img");

     var oDiv = document.getElementsByTagName("div")[0];

     for(var i=0;i<oImg.length;i++){

         oImg[i].onmouseover=function(){

             //在目标div中创建一个图像对象

             var img=new Image();

             //用big替换创建图像的small，赋值给第一幅大图，然后赋值给创建图像

             img.src=oImg[0].src=this.src.replace(/small/,"big");

         }

     }

     <body>

 <ul id="box">

     <li class="first"><img src="img/big_1.jpg"><div></div></li>

     <li><a href="javascript:;"><img src="img/small_1.jpg"></a></li>

     <li><a href="javascript:;"><img src="img/small_2.jpg"></a></li>

     </ul>

 </body>

 9 复选框（checkbox）全选/全不选/返选

 window.onload = function ()

 {

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

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

     var isCheckAll=function(){

         //i=0是全选框状态，n记录选中的个数

         for(var i=1,n=0;i<oInput.length;i++){

             //若此选框选中执行&&后面的，即个数加1.没选中不加

             oInput[i].checked&&n++;

         }

         //先执行判断选中个数，得到一个布尔值赋给全选框

         oInput[0].checked=n==oInput.length-1;

         //根据布尔值（1全选，0未全选）来判断是否已经全选

         oLabel.innerHTML=oInput[0].checked?"全不选":"全选"

     }

     //全选/全不选

     oInput[0].onclick = function ()

     {

         for (var i = 1; i < oInput.length; i++)

         {//确定每个复选框的状态和oInput[0](this指代)的状态一致

             oInput[i].checked = this.checked

         }

         isCheckAll()

     };

     //反选

     oA.onclick = function ()

     {

         for (var i = 1; i < oInput.length; i++)

         {

             oInput[i].checked = !oInput[i].checked

         }

         isCheckAll()

     };

    //根据复选个数更新全选框状态

     for (var i = 1; i < oInput.length; i++)

     {

         oInput[i].onclick = function ()

         {//每选中一个复选框判断一次

             isCheckAll()

         }

     }

 }

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

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

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

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

    原文:一些有用的javascript实例分析(一) 本文以http://fgm.cc/learn/链接的实例索引为基础,可参见其实际效果.分析和整理了一些有用的javascript实例,相信对一些初学 ...

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

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

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

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

  5. Vue源码分析(二) : Vue实例挂载

    Vue源码分析(二) : Vue实例挂载 author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-wi ...

  6. linux驱动由浅入深系列：高通sensor架构实例分析之二(驱动代码结构)【转】

    本文转载自:https://blog.csdn.net/radianceblau/article/details/73498303 本系列导航: linux驱动由浅入深系列:高通sensor架构实例分 ...

  7. [转载]JavaScript内存分析

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

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

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

  9. Python中的单继承与多继承实例分析

    Python中的单继承与多继承实例分析 本文实例讲述了Python中的单继承与多继承.分享给大家供大家参考,具体如下: 单继承 一.介绍 Python 同样支持类的继承,如果一种语言不支持继承,类就没 ...

随机推荐

  1. 《编程简介(Java) &#183;10.3递归思想》

    <编程简介(Java) ·10.3递归思想> 10.3.1 递归的概念 以两种方式的人:男人和女人:算法是两种:递归迭代/通知: 递归方法用自己的较简单的情形定义自己. 在数学和计算机科学 ...

  2. Windows下效率必备软件

    AutoHotKey: 神器!神器!神器!当然也得看使用者咯(^__^) 嘻嘻…… Listary: 本地搜索神器,当然还有别的作用,More&More. Launchy : 快速启动安装的应 ...

  3. Node.js Tools for Visual Studio

    https://www.visualstudio.com/en-us/features/node-js-vs.aspx

  4. WTL安装

    1.在AppWiz文件夹下有多个JScript文件,依据自己的编辑器选择对应的文件执行. 假设双击无法执行的话,则执行wscript //e:jscript (文件路径) 如wscript //e:j ...

  5. [Unity3D] 有关公告板实现的误区

    最直接实现一个公告板,我认为我们应该这样做: usingUnityEngine; publicclassBillboard :MonoBehaviour { voidUpdate() { transf ...

  6. Java误区: 静态代码块，当把类将被载入到自己主动运行？

    JAVA静态代码块会在类被载入时自己主动运行? 非常多Java开发人员的思想,被这个思想深深的轮奸了n遍,传播这个错误思想的博客,在网上一堆,越来越多的人被轮奸. 如:http://blog.csdn ...

  7. HDU 4067 Random Maze

    意甲冠军: 一个"随机图"它被定义为具有以下性质如: 一个入口和一个出口 有向图 对于入口  出度比入度大1 对于出口  入度比出度大1 对于其它点  入度等于出度 现给出一幅有向 ...

  8. oracle一视图性能问题

    oracle一些性能视图的解释  --关于是否收集 timed_statistics参数:用于决定是否收集相关的时间参数,true为收集.如果该参数设为false,则等待事件相关视图也就无法收集到数据 ...

  9. Java中关于OOM的场景及解决方法（转）

    http://developer.51cto.com/art/201112/305696.htm 1.OOM for Heap=>例如:java.lang.OutOfMemoryError: J ...

  10. Swift 书面 ToDo App

    下面的代码是使用的全部Xcode Version 6.0.1 (6A317)书面. 因为当使用团队开发stroyboard在并购的诸多不便的时间,所有或使用.xib该文件准备ToDo App. 想要实 ...