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 onload="init()">
    <table id="rating">
        <tr>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
        </tr>
    </table>
</body>
</html>

posted on 2012-12-20 10:08  王春雷  阅读(463)  评论(0编辑  收藏  举报

导航