當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
一些有用的javascript实例分析(二)
生活随笔
收集整理的這篇文章主要介紹了
一些有用的javascript实例分析(二)
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一些有用的javascript實(shí)例分析(二) 原文:一些有用的javascript實(shí)例分析(二) 1 5 求出數(shù)組中所有數(shù)字的和
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.οnkeyup=function(){
8 //用空白替換非數(shù)字和逗號(hào)
9 this.value=this.value.replace(/[^(\d)|(,)]/,"");
10 };
11 oBtn.οnclick=function(){
12 var sum=0;
13 //將輸入的值以逗號(hào)為分隔符，轉(zhuǎn)化為字符數(shù)組
14 var oInput=document.getElementsByTagName("input")[0].value.split(",")
15 for(var i in oInput){
16 //把字符型轉(zhuǎn)化為整型
17 sum=parseInt(oInput[i]);
18 }
19 };
20 oStrong.innerHTML=sum;
21 }
22
23 6 簡易選項(xiàng)卡
24 window.onload = function ()
25 { //獲取標(biāo)題
26 var oLi = document.getElementById("tab").getElementsByTagName("li");
27 //獲取內(nèi)容
28 var oUl = document.getElementById("content").getElementsByTagName("ul");
29 for(var i=0;i<oLi.length;i++){
30 oLi[i].index=i;
31 //滑動(dòng)到指定標(biāo)題
32 oLi[i].onmouseover = function (){
33 for(var n=0;n<oLi.length;n++){
34 //首先使所有標(biāo)題樣式都不變
35 oLi[n].className="";
36 //指定標(biāo)題樣式改變，this指代oLi[i]
37 this.className="current";
38 }
39 for(var n=0;n<oUl.length;n++){
40 //所有的內(nèi)容都不顯示(實(shí)現(xiàn)無縫)
41 oUl[n].style.display="";
42 //指定標(biāo)題對(duì)應(yīng)的內(nèi)容顯示
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>網(wǎng)頁特效原理分析</li>
60 <li>響應(yīng)用戶操作</li>
61 </ul>
62 <ul>
63 <li>戛納印象效果</li>
64 <li>數(shù)組</li>
65 <li>字符串連接</li>
66 </ul>
67 <ul>
68 <li>JavaScript組成：ECMA來源</li>
69 <li>JavaScript出現(xiàn)的位置、優(yōu)缺點(diǎn)</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.οnclick=function(){
81 var style=oUl.style;
82 //內(nèi)容在顯示和隱藏之間切換
83 style.display=style.display=="none"?"block":"none";
84 //標(biāo)題欄的圖標(biāo)隨下拉框的改變而改變（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鼠標(biāo)移過，改變圖片路徑
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].οnmοuseοver=function(){
104 //在目標(biāo)div中創(chuàng)建一個(gè)圖像對(duì)象
105 var img=new Image();
106 //用big替換創(chuàng)建圖像的small，賦值給第一幅大圖，然后賦值給創(chuàng)建圖像
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 復(fù)選框（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是全選框狀態(tài)，n記錄選中的個(gè)數(shù)
126 for(var i=1,n=0;i<oInput.length;i++){
127 //若此選框選中執(zhí)行&&后面的，即個(gè)數(shù)加1.沒選中不加
128 oInput[i].checked&&n++;
129 }
130 //先執(zhí)行判斷選中個(gè)數(shù)，得到一個(gè)布爾值賦給全選框
131 oInput[0].checked=n==oInput.length-1;
132 //根據(jù)布爾值（1全選，0未全選）來判斷是否已經(jīng)全選
133 oLabel.innerHTML=oInput[0].checked?"全不選":"全選"
134 }
135 //全選/全不選
136 oInput[0].onclick = function ()
137 {
138 for (var i = 1; i < oInput.length; i++)
139 {//確定每個(gè)復(fù)選框的狀態(tài)和oInput[0](this指代)的狀態(tài)一致
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 //根據(jù)復(fù)選個(gè)數(shù)更新全選框狀態(tài)
155 for (var i = 1; i < oInput.length; i++)
156 {
157 oInput[i].onclick = function ()
158 {//每選中一個(gè)復(fù)選框判斷一次
159 isCheckAll()
160 }
161 }
162 }
?
posted on 2014-05-10 19:45 NET未來之路 閱讀(...) 評(píng)論(...) 編輯 收藏轉(zhuǎn)載于:https://www.cnblogs.com/lonelyxmas/p/3720914.html
總結(jié)
以上是生活随笔為你收集整理的一些有用的javascript实例分析(二)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： IOS web app一些实用的属性设置
- 下一篇： 【翻译】使用Ext JS设计响应式应用程