首页 > 代码库 > DOM案例五星评分控件
DOM案例五星评分控件
模仿网页上评分的五个五星。
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 .b11 {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 else31 {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 else64 {65 input.className = "r";66 }67 }68 }69 </script>70 </head>71 <body onl oad="initTr()">72 <input type="text" />73 <input type="text"/>74 <input type="text" />75 <input type="text" />76 <a href="http://www.mamicode.com/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 ondblclick="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>
DOM案例五星评分控件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。