我是一个菜鸟，我只是在努力，2021正视自己，面对2021！

记录我的旅程8之JavaScript Dom学习笔记

前言:下面我们接着旅程7继续我们的JavaScript Dom征程8。在这篇博客中我们还是继续书写我们控制层的练习代码，在这篇博客中我会实现这几个功能点，第一个就是评分控件的实现，现在很多网站都有这个功能，就是你写了一个博客，让别人给你评论，还有鼠标的移动的一些知识点及文本框的提示信息等技术

  1. 控制层的练习

(1)练习3：评分控件v2。用一个单行5列的table，td中默认都是startEmpty.jpg这个图片,监听td的mouseover事件，鼠标在一个td的时候将这个td以及之前的td的内容换成starFill.jpg这张图片。鼠标在评分控件上的时候显示显示超链接形式的鼠标图标

 1    <script type="text/javascript">
 2 
 3         function indexOf(arrr, element) {
 4 
 5             for (var i = 0; i < arrr.length; i++) {
 6 
 7                 if (arrr[i] == element) {
 8 
 9                     return i;
10 
11                 }
12 
13             }
14 
15             return -1;
16 
17         }
18 
19         function initEvent() {
20 
21             var rating = document.getElementById("rating");
22 
23             var tds = document.getElementsByTagName("td");
24 
25             for (var i = 0; i < tds.length; i++) {
26 
27                 var td = tds[i];
28 
29                 td.style.cursor = "pointer";
30 
31                 td.onmouseover = function () {
32 
33                     var rating = document.getElementById("rating");
34 
35                     var tds = document.getElementsByTagName("td");
36 
37                     var index = indexOf(tds, this);
38 
39                     for (var i = 0; i <= index; i++) {
40 
41                         tds[i].innerText = '★';
42 
43                     }
44 
45                     for (var i = index + 1; i < tds.length; i++) {
46 
47                         tds[i].innerText = '☆';
48 
49                     }
50 
51                 };
52 
53             }
54 
55         }
56 
57     </script>
58 
59 <body onload="initEvent()">
60 
61     <table id="rating">
62 
63         <tr>
64 
65             <td>☆</td>
66 
67             <td>☆</td>
68 
69             <td>☆</td>
70 
71             <td>☆</td>
72 
73             <td>☆</td>
74 
75             <td>☆</td>
76 
77         </tr>
78 
79     </table>
80 
81 </body>

 

 

(2) 练习4：界面上有几个球队的名字的列表，将鼠标放在球队名字上就变成红色背景，其他球队背景颜色为白色，点击一个球队的时候就将点击的球队变成fontSize=30字体。

 1    <script type="text/javascript">
 2 
 3         function initEvent() {
 4 
 5             var football = document.getElementById("football");
 6 
 7             var lis = football.getElementsByTagName("li");
 8 
 9             for (var i = 0; i < lis.length; i++) {
10 
11                 var li = lis[i];
12 
13                 li.onmouseover = function () {
14 
15                     var football = document.getElementById("football");
16 
17                     var lis = football.getElementsByTagName("li");
18 
19                     for (var i = 0; i < lis.length; i++) {
20 
21                         var li = lis[i];
22 
23                         if (li == this) {
24 
25                             li.style.background = "red";
26 
27                         }
28 
29                         else {
30 
31                             li.style.background = "white";
32 
33                         }
34 
35                     }
36 
37                 }
38 
39                 li.onclick = function () {
40 
41                     this.style.fontSize = 30;
42 
43                 }
44 
45             }
46 
47         }
48 
49     </script>
50 
51 <body onload="initEvent()">
52 
53     <ul id="football">
54 
55         <li>美国</li>
56 
57         <li>韩国</li>
58 
59         <li>朝鲜</li>
60 
61         <li>国足</li>
62 
63         <li>俄罗斯</li>
64 
65     </ul>
66 
67 </body>

 

 

(3)练习5：有一个搜索文本框，焦点不再文本框中的时候，如果文本框没有值，则文本框显示为灰色文本(Gray)的“输入搜索关键字”，否则显示用户输入的值；焦点在文本框中时如果之前显示”输入搜索关键字”，则清空文本框的值，并且将文本修改为黑色。Onfocus的时候如果文本框中的值为”输入搜索关键字”，则清空文本框，并且恢复文本框中的颜色为Black，onblur的时候如果文本框中没有值，则将文本框的值设置为”输入搜索关键字”并且文本框中显示灰色文本(Gray)，style.color=’Gray’

 1     <script type="text/javascript">
 2 
 3         function inputBlur(keyword) {
 4 
 5             if (keyword.value.length <= 0) {
 6 
 7                 keyword.value = "请输入搜索关键字";
 8 
 9                 keyword.style.color = "Gray";
10 
11             }
12 
13         }
14 
15         function inputFocus(keyword) {
16 
17             if (keyword.value == '请输入搜索关键字') {
18 
19                 keyword.value = '';
20 
21                 keyword.style.color = "black";
22 
23             }
24 
25         }
26 
27     </script>
28 
29     <input onblur="inputBlur(this)" onfocus="inputFocus(this)" id="keyword" value="请输入搜索关键字" style="color:Gray" />
30 
31     <input type="button" value="搜索一下" />

 

posted @ 2012-08-01 21:01  Kencery  阅读(558)  评论(0)  编辑  收藏  举报
友情链接：初心商城