js 简易评分控件
页面代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<body> <table id="rating"> <tr> <td>☆</td> <td>☆</td> <td>☆</td> <td>☆</td> <td>☆</td> <td id="score"></td> </tr> </table> </body>
js代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script type="text/javascript"> window.onload = function () { //找到rating table下的 td var table = document.getElementById("rating"); var tds = table.getElementsByTagName("td"); //给每个td添加onmouseover事件 for (var i = 0; i < tds.length; i++) { //给每个td添加id if (tds[i].id != "score") { tds[i].id = i; tds[i].onmouseover = function () { this.style.cursor = "pointer"; var index = this.id; //将鼠标前面的所有五角星变成实心的 for (var j = 0; j <= parseInt(index); j++) { tds[j].innerHTML = "★"; } //将鼠标后面的所有五角星变成空心 for (var i = parseInt(index) + 1; i < tds.length; i++) { if (tds[j].id != "score") { tds[i].innerHTML = "☆"; } } //添加评分 document.getElementById("score").innerHTML = parseInt(this.id)+1; } } } } </script>