DOM案例五星评分控件

最新推荐文章于 2024-08-22 14:32:34 发布

weixin_30879169

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量78

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/sytu/p/4088193.html

版权

模仿网页上评分的五个五星。

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         .r
 7         {
 8             color:red;
 9         }
10         .b
11         {
12             color:black;
13         }
14     </style>
15 
16     <script type="text/javascript">
17         function initEvent() {
18             var inputs = document.getElementsByTagName("input");
19             for (var i = 0; i < inputs.length; i++) {
20                 var input = inputs[i];
21                 input.onblur = inputOnBlur;
22             }
23         }
24             function inputOnBlur()
25             {
26                 if(this.value.length<=0)
27                 {
28                     this.style.background = "red";
29                 }
30                 else
31                 {
32                     this.style.background = "white";
33                 }
34             }
35         function initTr()
36         {
37             var trs = document.getElementsByTagName("td");
38             for(var i=0;i<trs.length;i++)
39             {
40                 var td = trs[i];
41                 td.style.cursor = "pointer";
42                 td.width = "30px";
43                 td.height = "30px";
44                 td.onfocus = deal;
45             }
46         }
47         function deal()
48         {
49             var inputs = document.getElementsByTagName("td");
50             for(var i=0;i<inputs.length;i++)
51             {
52                 var input = inputs[i];
53                 
54                 if(input==this)
55                 {
56                     input.className = "r";
57                     for (var p = i + 1; p< inputs.length; p++)
58                     {
59                         inputs[p].className = "b";
60                     }
61                     return;
62                 }
63                 else
64                 {
65                     input.className = "r";
66                 }
67             }
68         }
69     </script>
70 </head>
71 <body οnlοad="initTr()">
72   <input type="text" />
73     <input type="text"/>
74     <input type="text" />
75     <input type="text" />
76     <a href="htmlpagewrite.html">htmlpagewrite.html</a>
77     <font size="40">
78         <table border="0" style="margin-top:100px;margin-left:100px">
79             <tr>
80 
81                 <td οndblclick="this.className='b'">★</td>
82                 <td>★</td>
83                 <td>★</td>
84                 <td>★</td>
85                 <td>★</td>
86 
87             </tr>
88         </table>
89     </font>
90 </body>
91 </html>

转载于:https://www.cnblogs.com/sytu/p/4088193.html

weixin_30879169

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM案例五星评分控件

模仿网页上评分的五个五星。 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 ...
复制链接

扫一扫