JavaScript星级评分

2017-01-12 19:03:41来源:cnblogs.com作者:森林长人点击

事件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>

 

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台