原文:一些有用的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. 光谱郑匡移动互联网O2O完美融合

    移动互联网尽管市场颇大,前景广阔,可是由于数据过于密集,非常难精准的定位所谓的目标客户群,然而O2O的线下市场却与互联网市场有极大的反差.一直认为高校周边的小商家是最幸福的生意人,客户明白(就是本校学 ...

  2. Xamarin.Android 入门实例（3）之呼叫电话号码

    1.Main.axml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns: ...

  3. [BEROR]CodeSign error: code signing is required for product type &#39;Application&#39; in SDK &#39;iOS 8.1&#39;

    解决方法: 选择project->Build Settings -> Code Signing -> Code Signing Identity -> Debug -> ...

  4. CareerCup Chapter 4 Trees and Graphs

    struct TreeNode{ int val; TreeNode* left; TreeNode* right; TreeNode(int val):val(val),left(NULL),rig ...

  5. [LeetCode234]Palindrome Linked List

    题目: Given a singly linked list, determine if it is a palindrome. 判断一个单链表是不是回文 思路: 1.遍历整个链表,将链表每个节点的值 ...

  6. DisplayContent、StackBox、TaskStack笔记

    文章仅零散记录自己的一点理解,仅供自己參考. 每一个显示设备,都有一个Display对象,DisplayManagerService专门管理这些Display. 1.DisplayContent() ...

  7. Snail—ORACLE基础之事务学习(五)

    ---------------事务---当运行到commit时 事务才算是完毕,不然 会运行rollback操作. declare v_money acount.money%type:=1223; e ...

  8. WWDC2014开源

    A Cocoa OSX App to help you download WWDC2014 videos 地址:https://github.com/iosxtools/WWDC2014 版权声明:本 ...

  9. 流动python - 自然装饰

    好多人搞非常复杂的装饰,其实本质easy. 首先,这是什么装饰?发现穿着在代码@xxx帽子,它是装饰. 它是由如何定制它装饰? 其实不管什么人需要一个参数callable用来做装饰器,比方函数和类.为 ...

  10. redis基础的字符串类型

    redis —— 第二篇 基础的字符串类型 我们都知道redis是采用C语言开发,那么在C语言中表示string都是采用char[]数组的,然后你可能会想,那还不简单,当我执行如下命令,肯定是直 接塞 ...