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

浏览数：26 / 时间：2015年06月08日

  1 5 求出数组中所有数字的和
  2 window.onload = function ()
  3 {
  4     var oBtn = document.getElementsByTagName("button")[0];
  5     var oInput = document.getElementsByTagName("input")[0]
  6     var oStrong = document.getElementsByTagName("strong")[0];
  7     oInput.onkeyup=function(){
  8         //用空白替换非数字和逗号
  9         this.value=this.value.replace(/[^(\d)|(,)]/,"");
 10     };
 11     oBtn.onclick=function(){
 12         var sum=0;
 13         //将输入的值以逗号为分隔符，转化为字符数组
 14         var oInput=document.getElementsByTagName("input")[0].value.split(",")
 15         for(var i in oInput){
 16             //把字符型转化为整型
 17             sum=parseInt(oInput[i]);
 18         }
 19     };
 20     oStrong.innerHTML=sum;
 21 }
 22 
 23 6 简易选项卡
 24 window.onload = function ()
 25 {   //获取标题
 26     var oLi = document.getElementById("tab").getElementsByTagName("li");
 27     //获取内容
 28     var oUl = document.getElementById("content").getElementsByTagName("ul");
 29     for(var i=0;i<oLi.length;i++){
 30         oLi[i].index=i;
 31         //滑动到指定标题
 32         oLi[i].onmouseover = function (){
 33         for(var n=0;n<oLi.length;n++){
 34             //首先使所有标题样式都不变
 35             oLi[n].className="";
 36             //指定标题样式改变，this指代oLi[i]
 37             this.className="current";
 38         }
 39         for(var n=0;n<oUl.length;n++){
 40             //所有的内容都不显示(实现无缝)
 41             oUl[n].style.display="";
 42             //指定标题对应的内容显示
 43             oUl[this.index].style.display="block"
 44         }    
 45         
 46     }
 47 }
 48 }
 49     
 50    
 51  div id="outer">
 52     <ul id="tab">
 53         <li class="current">第一课</li>
 54         <li>第二课</li>
 55         <li>第三课</li>
 56     </ul>
 57     <div id="content">
 58         <ul style="display:block;">
 59             <li>网页特效原理分析</li>
 60             <li>响应用户操作</li>       
 61         </ul>
 62         <ul>
 63             <li>戛纳印象效果</li>
 64             <li>数组</li>
 65             <li>字符串连接</li>
 66         </ul>
 67         <ul>
 68             <li>JavaScript组成：ECMA来源</li>
 69             <li>JavaScript出现的位置、优缺点</li>
 70         </ul>
 71     </div>
 72 </div>
 73 </body>
 74   
 75 7 单一按钮显示/隐藏
 76 window.onload = function ()
 77 {
 78     var oH2 = document.getElementsByTagName("h2")[0];
 79     var oUl = document.getElementsByTagName("ul")[0];
 80     oH2.onclick=function(){
 81         var style=oUl.style;
 82         //内容在显示和隐藏之间切换
 83         style.display=style.display=="none"?"block":"none";
 84         //标题栏的图标随下拉框的改变而改变（background-position）
 85         oH2.className=style.display=="none"?"open":""
 86     }
 87 <body>
 88 <div id="outer">
 89     <h2>播放列表...</h2>
 90     <ul>
 91         <li><a href="javascript:;">玩家之徒 - 蔡依林</a></li>
 92         <li><a href="javascript:;">原谅我就是 - 戴佩妮</a></li>
 93     </ul>
 94 </div>
 95 </body>
 96 
 97 8鼠标移过，改变图片路径
 98 window.onload = function ()
 99 {
100     var oImg = document.getElementById("box").getElementsByTagName("img");
101     var oDiv = document.getElementsByTagName("div")[0];
102     for(var i=0;i<oImg.length;i++){
103         oImg[i].onmouseover=function(){
104             //在目标div中创建一个图像对象
105             var img=new Image();
106             //用big替换创建图像的small，赋值给第一幅大图，然后赋值给创建图像
107             img.src=oImg[0].src=this.src.replace(/small/,"big");
108         }
109     }
110     <body>
111 <ul id="box">
112     <li class="first"><img src="img/big_1.jpg"><div></div></li>
113     <li><a href="javascript:;"><img src="img/small_1.jpg"></a></li>
114     <li><a href="javascript:;"><img src="img/small_2.jpg"></a></li>
115     </ul>
116 </body>
117 
118 
119 9 复选框（checkbox）全选/全不选/返选
120 window.onload = function ()
121 {
122     var oInput = document.getElementsByTagName("input");
123     var oLabel = document.getElementsByTagName("label")[0];
124     var isCheckAll=function(){
125         //i=0是全选框状态，n记录选中的个数
126         for(var i=1,n=0;i<oInput.length;i++){
127             //若此选框选中执行&&后面的，即个数加1.没选中不加
128             oInput[i].checked&&n++;
129         }
130         //先执行判断选中个数，得到一个布尔值赋给全选框
131         oInput[0].checked=n==oInput.length-1;
132         //根据布尔值（1全选，0未全选）来判断是否已经全选
133         oLabel.innerHTML=oInput[0].checked?"全不选":"全选"
134     }
135     //全选/全不选
136     oInput[0].onclick = function ()
137     {
138         for (var i = 1; i < oInput.length; i++)
139         {//确定每个复选框的状态和oInput[0](this指代)的状态一致
140             oInput[i].checked = this.checked            
141         }
142         isCheckAll()
143     };
144     //反选
145     oA.onclick = function ()
146     {
147         for (var i = 1; i < oInput.length; i++)
148         {
149             oInput[i].checked = !oInput[i].checked
150         }
151         isCheckAll()
152     };
153 
154    //根据复选个数更新全选框状态
155     for (var i = 1; i < oInput.length; i++)
156     {
157         oInput[i].onclick = function ()
158         {//每选中一个复选框判断一次
159             isCheckAll()
160         }    
161     }    
162 }