模仿网页上评分的五个五星。
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 onload="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 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>