原文:
一些有用的javascript实例分析(二)
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 }
