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 }
时间： 2024-09-16 08:00:17