HTML中评分控件（类似于淘宝评价时的评分控件）的代码

最新推荐文章于 2021-06-20 23:28:03 发布

weixin_30588675

最新推荐文章于 2021-06-20 23:28:03 发布

阅读量739

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/wangchunlei123/archive/2012/12/20/2825943.html

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function init() {
            var table = document.getElementById("rating");
            var tds = table.getElementsByTagName("td");
            for (var i = 0; i < tds.length; i++) {
                tds[i].onmouseover = change;
                tds[i].style.cursor = "pointer";
            }
        }
        function indexOf(arr, element) {
            var j = -1;
            for (var i = 0; i < arr.length; i++) {
                if (arr[i]==element) {
                    j = i;
                    break;
                }
            }
            return j;
        }
        function change() {
            var table = document.getElementById("rating");
            var tds = table.getElementsByTagName("td");
            var n = indexOf(tds, this);
            for (var i = 0; i <= n; i++) {
                tds[i].innerText = "★";
           }
            for (var i = n+1; i < tds.length; i++) {
                tds[i].innerText = "☆";
            }
        }
    </script>
</head>
<body οnlοad="init()">
    <table id="rating">
        <tr>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
        </tr>
    </table>
</body>
</html>