JavaScript星级评分
事件onmouseover
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>JavaScript星级评分</title> 5 <style type="text/css"> 6 *{margin:0;padding:0;} 7 .wrapper{height:20px;padding:5px;width:130px;margin:100px auto 10px;} 8 tr,td{font-size:66px;color:#000000;background:#ffffff;} 9 </style> 10 <script type="text/javascript"> 11 function ArrayIndexOf(arr, element) { 12 for (var i = 0; i < arr.length; i++) { 13 if (arr[i] == element) { 14 return i; 15 } 16 } 17 return -1; 18 } 19 function GetTds() { 20 var tbl = document.getElementById("tblMain"); 21 var tds = tbl.getElementsByTagName("td"); 22 return tds; 23 } 24 function InitEvent() { 25 var tds=GetTds(); 26 for (var i = 0; i < tds.length; i++) { 27 var td = tds[i]; 28 td.onmouseover = TdOnclick; 29 td.style.cursor = "pointer"; 30 31 } 32 } 33 function TdOnclick() { 34 var tds = GetTds(); 35 var index = ArrayIndexOf(tds, this); 36 for (var i = 0; i <=index; i++) { 37 var td = tds[i]; 38 td.innerHTML = "★"; 39 } 40 for (var j = index + 1; j < tds.length; j++) { 41 var td = tds[j]; 42 td.innerHTML = "☆"; 43 } 44 } 45 46 </script> 47 </head> 48 <body onload="InitEvent()" class="wrapper"> 49 <table id="tblMain"> 50 <tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr> 51 </table> 52 </body> 53 </html>
