案例练习

•案例1：创建三个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景色设置为红色，如果不为空则为白色。提示：焦点进入控件的事件是onfocus，焦点离开控件的事件是onblur。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 2 
 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 <html xmlns="http://www.w3.org/1999/xhtml" >
 5 <head>
 6     <title></title>
 7 
 8    //获取事件源的三种方法：this、window.event.srcElement、getElementBy..   
 9 
10     <script type="text/javascript">
11         function initTxt() {
12             var txts = document.getElementsByTagName("input");
13             for (var i = 0; i < txts.length; i++) {
14                 if (txts[i].type == "text") {
15                     //事件响应函数
16                     txts[i].onblur = iBlur; //该事件为：当对象失去焦点时被触发
17                 }
18             }
19         }
20        //如果文本框失去焦点调用下面的函数，如果文本框为空，变为红色，否则为白色
21         function iBlur() {
22             if (this.value.length <= 0) {//如果文本框里没有输入内容，为红色
23                 this.style.backgroundColor = "red";//JS中使用style
24             } else {
25             this.style.backgroundColor = "white";//输入内容后，为白色
26             }
27         }
28 
29  
30     </script>
31 </head>
32 <body onload="initTxt()">
33     <input type="text" value=""/>
34     <input type="text" value="" />
35     <input type="text" value="" />
36     
37     <input type="button" value="click" />
38 </body>
39 </html>

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title></title>
 5     <script type="text/javascript">
 6         function iBlur(txt) {
 7             var t2 = document.getElementById("t2");
 8             t2.style.backgroundColor = txt.style.backgroundColor;
 9             t2.style.color = txt.style.color;
10             t2.style.width = txt.style.width;
11             t2.value = txt.value;
12         }
13         function iFocus(txt) {
14             var t1 = document.getElementById("t1");
15             txt.style.backgroundColor = t1.style.backgroundColor;
16             txt.style.color = t1.style.color;
17             txt.style.width = t1.style.width;
18             txt.value = t1.value;
19         }
20     </script>
21 </head>
22 <body>
23     <input id="t1" type="text" value="" style="background-color:Green; color:Red; width:300px" />
24     <input type="text" onfocus="iFocus(this)" />
25 </body>
26 </html>

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 2 
 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 <html xmlns="http://www.w3.org/1999/xhtml" >
 5 <head>
 6     <title></title>
 7     <script type="text/javascript">
 8         function iBlur(txt) {
 9             var t2 = document.getElementById("t2");
10             t2.style.backgroundColor = txt.style.backgroundColor;
11             t2.style.color = txt.style.color;
12             t2.style.width = txt.style.width;
13             t2.value = txt.value;
14         }
15         function iFocus(txt) {
16             var t2 = document.getElementById("t2");
17             t2.style.backgroundColor = txt.style.backgroundColor;
18             t2.style.color = txt.style.color;
19             t2.style.width = txt.style.width;
20             t2.value = txt.value;
21         }
22     </script>
23 </head>
24 <body>
25     <input id="t1" type="text" value="" onfocus="iFocus(this)" style="background-color:Green; 
26 
27 color:Red; width:300px" />
28     <input id = "t2" type="text"  />
29 </body>
30 </html>

案例2：评分控件V1，用一个单行5列的Table做评分控件，监听td的click事件，点击一个td的时候，将这个td及之前的td背景变为红色，之后的td背景变为白色。鼠标在评分控件上的时候显示超链接形式的鼠标图标。。

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title></title>
 5     <script type="text/javascript">
 6         
 7         
 8         function init() {
 9             var table = document.getElementById("rating");
10             var tds = table.getElementsByTagName("td");
11             for (var i = 0; i < tds.length; i++) {
12                 //事件响应函数
13                 tds[i].onmouseover = change;
14                 tds[i].onclick = stop;
15                 tds[i].style.cursor = "pointer";
16             }
17         }
18         //记录是否点鼠标，默认没点
19         var isClick = false;
20         function stop() {
21             isClick = true;
22         }
23         function indexOf(arr,element){
24             var j = -1;
25             for(var i=0;i<arr.length;i++){
26                 if(arr[i] == element)
27                 {
28                     j = i;
29                     break;
30                 }
31             }
32             return j;
33         }
34         function change() {
35             //当没点鼠标的时候去执行
36             if (!isClick) {
37                 var table = document.getElementById("rating");
38                 var tds = table.getElementsByTagName("td");
39                 var n = indexOf(tds, this);
40                 for (var i = 0; i <= n; i++) {
41                     //tds[i].style.backgroundColor = "red";
42                     tds[i].innerText = "★";
43                 }
44 
45                 for (var i = n + 1; i < tds.length; i++) {
46                     //tds[i].style.backgroundColor = "white";
47                     tds[i].innerText = "☆";
48                 }
49             }
50             
51         }
52     </script>
53 </head>
54 <body onload="init()">
55     <table id="rating">
56         <tr>
57             <td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td>
58         </tr>
59     </table>
60 </body>
61 </html>

•练习1：超链接的单选效果。页面上若干个超链接，点击一个超链接的时候被点击的超链接变为红色背景，其他超链接背景还原为白色。

参考：点击变“呜呜”，没有点击变“哈哈”。window.event.returnValue=false;。难点“this”

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title></title>
 5     <script type="text/javascript">
 6         function init() {
 7             var d1 = document.getElementById("d1");
 8             var links = d1.getElementsByTagName("a");
 9             for (var i = 0; i < links.length; i++) {
10                 links[i].onclick = linkClick;
11             }
12         }
13         function linkClick() {
14             var d1 = document.getElementById("d1");
15             var links = d1.getElementsByTagName("a");
16             //当前a标签变成红色
17             this.style.backgroundColor = "red";
18             //让其它标签变成白色
19             for (var i = 0; i < links.length; i++) {
20                 if (links[i] != this) {
21                     links[i].style.backgroundColor = "white";
22                 }
23             }
24 
25             //取消后续内容的执行
26                 window.event.returnValue = false;
27         }
28     </script>
29 </head>
30 <body onload="init()">
31     <div id="d1">
32         <a href="http://www.baidu.com">百度</a>
33         <a href="http://www.qiushibaike.com">糗百</a>
34         <a href="http://www.cnbeta.com">cnbeta</a>
35     </div>
36     <div id="d2">
37         <a href="http://www.baidu.com">百度</a>
38         <a href="http://www.qiushibaike.com">糗百</a>
39         <a href="http://www.cnbeta.com">cnbeta</a>
40     </div>
41 </body>
42 </html>

练习2：点击按钮，表格隔行变色：偶数行为黄色背景，奇数行为默认颜色。通过table的getElementsByTagName取得所有的tr，依次遍历，如果是偶数就…………。为什么？防止看串了行。鼠标经过的时候显示灰色

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title></title>
 5     <script type="text/javascript">
 6         function init() {
 7             var table = document.getElementById("students");
 8             var trs = table.getElementsByTagName("tr");
 9             for (var i = 0; i < trs.length; i++) {
10                 //鼠标经过的时候，换颜色
11                 trs[i].onmouseover = onOver;
12                 //当鼠标离开时候，还原颜色
13                 trs[i].onmouseout = onOut;
14                 //隔行换色
15                 if (i % 2 == 0) {
16                     trs[i].style.backgroundColor = "red";
17                 } else {
18                 trs[i].style.backgroundColor = "yellow";
19                 }
20             }
21         }
22         var defaultColor;
23         function onOver() {
24             defaultColor = this.style.backgroundColor;
25             this.style.backgroundColor = "gray";
26         }
27         function onOut() {
28             this.style.backgroundColor = defaultColor;
29         }
30     </script>
31 </head>
32 <body onload="init()">
33     <table id="students" border="1" width="400px">
34         <tr>
35             <td>刘备</td>
36             <td>男</td>
37             <td>19</td>
38         </tr>
39         <tr>
40             <td>关羽</td>
41             <td>男</td>
42             <td>18</td>
43         </tr>
44         <tr>
45             <td>张飞</td>
46             <td>男</td>
47             <td>17</td>
48         </tr>
49         <tr>
50             <td>曹操</td>
51             <td>男</td>
52             <td>20</td>
53         </tr>
54         <tr>
55             <td>吕布</td>
56             <td>男</td>
57             <td>19</td>
58         </tr>
59     </table>
60 </body>
61 </html>

•练习3：放若干文本框，获得焦点的文本框黄色背景，其他控件背景颜色是白色

–思路1：监听所有input的onfocus事件→将背景设置为黄色，监听所有input的onblur事件→将背景设置为白色。思路2：只监听onfocus和练习1一样。

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title></title>
 5     <script type="text/javascript">
 6         function init() {
 7             var txts = document.getElementsByTagName("input");
 8             for (var i = 0; i < txts.length; i++) {
 9                 if (txts[i].type == "text") {
10                     txts[i].onfocus = function() { this.style.backgroundColor = "red"; };
11                     //txts[i].onblur = reset;
12                     txts[i].onblur = function() { this.style.backgroundColor = "white"; };
13                 }
14             }
15         }
16         function reset() {
17             this.style.backgroundColor = "white";
18         }
19         function change() {
20             this.style.backgroundColor = "red";
21 //            
22 //            var txts = document.getElementsByTagName("input");
23 //            for (var i = 0; i < txts.length; i++) { //以前的老式写法，不使用onblur事件
24 //                if (txts[i] != this) {
25 //                    txts[i].style.backgroundColor = "white";
26 //                }
27 //            }
28             
29         }
30     </script>
31 </head>
32 <body onload="init()">
33     <input type="text" value="" />
34     <input type="text" value="" />
35     <input type="text" value="" />
36     <input type="text" value="" />
37     <input type="text" value="" />
38     <input type="text" value="" />
39     
40     <input type="button" value="按钮" />
41 </body>
42 </html>

•练习4：点击ul 中的li，被点击的li高亮显示（背景是黄色），其他li白色背景。监听每个li的onclick事件，将点击的背景设置为黄色，其他的设置为白色背景。

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         #l li
 7         {
 8             width:300px;
 9             list-style-type:none;
10             float:left;
11             }
12     </style>
13    <script type="text/javascript">
14        function init() {
15        
16            var ul = document.getElementById("l");
17            var lis = ul.getElementsByTagName("li");
18            for (var i = 0; i < lis.length; i++) {
19                lis[i].style.cursor = "pointer";
20                
21                lis[i].onclick = function() {
22                    var ul = document.getElementById("l");
23                    var lis = ul.getElementsByTagName("li");
24                    this.style.backgroundColor = "red";
25                    for (var i = 0; i < lis.length; i++) {
26                        if (lis[i] != this) {
27                            lis[i].style.backgroundColor = "white";
28                        }
29                    }
30                };
31            }
32        }
33    </script>
34 </head>
35 <body onload="init()">
36     <ul id="l">
37         <li>C#</li>
38         <li>java</li>
39         <li>JavaScript</li>
40         <li>html</li>
41     </ul>
42 </body>
43 </html>

posted @ 2013-03-24 18:50 Big.Eagle 阅读(166) 评论(0) 收藏举报

刷新页面返回顶部

案例练习

公告