原文:一些有用的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. WPF中两条路径渐变的探讨

    原文:WPF中两条路径渐变的探讨 我们在WPF中,偶尔也会涉及到两条路径作一些“路径渐变 ”.先看看比较简单的情形:如下图(关键点用红色圆点加以标识):(图1) 上面图1中的第1幅图可以说是最简单的路 ...

  2. CSU 1659: Graph Center（SPFA）

    1659: Graph Center Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 63  Solved: 25 [id=1659"> ...

  3. Flex发行2048游戏

    近来的2048像挺火的游戏.在公交车,吃.甚至还有人走在路上拿着手机在玩.之前我看我的同事们戏,我认为这是很天真,中移动太无聊了吧 到后面,他是在,我觉得真的很无聊,这时候,无聊的时候无聊,后来我想用 ...

  4. SignalR与ActiveMQ

    SignalR与ActiveMQ结合构建实时通信   一.概述 本教程主要阐释了如何利用SignalR与消息队列的结合,实现不同客户端的交互 SignalR如何和消息队列交互(暂使用ActiveMQ消 ...

  5. hibernate的通配符比拼接sql到底好在哪?

    Hibernate对于刚接触的人来说,通配符只是提供了另一种组合sql的方式.接触的久了,熟悉之后,才能够真正理解通配符在Hibernate中起到的作用 主要作用有两点: 1,避免sql注入 hibe ...

  6. Linux高性能server规划——多线程编程（在）

    多线程编程 Linux主题概述 线程模型 线程是程序中完毕一个独立任务的完整执行序列.即一个可调度的实体. 依据执行环境和调度者的身份.线程可分为内核线程和用户线程.内核线程,在有的系统上也称为LWP ...

  7. 写一个 docker 打击一系列手册

    感谢您的关注,分享也再次给自己一个学习的.机会组织和总结.对未来一段时间内准备一个关于 docker 一系列的实际应用,其中的一些内容此前曾宣布.准备再次修改和整理. 以下是主要的文件夹中的一个: 创 ...

  8. Java他们其中一个IO（一）

    1.I/O 操作的目标 其中从数据源读取数据,和写数据到的目标位置数据. 2.IO 的分类方法 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTc ...

  9. iOS 中国排序

    这里分享一个中国某种方便的方法,我们放在一起的人脉资源后,方便的类别,使用自己的包, 此处所使用的方法贴,源代码可以在本文的结尾下载. 要记得加头文件 #import "NSArray+So ...

  10. 在内存中建立 MySQL 的临时目录（转）

    MySQL 系统会在内存(MEMORY)和磁盘(MyISAM)中建立临时表,如何能知道在磁盘中建立了多少临时表以及在内存中建立多少临时表呢?你可以通过下面命令获知: ? 1 2 3 4 5 6 7 m ...