Js实现网站常用的评分效果!

View Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>网站评分特效</title>
    <style type="text/css">
        *
        {
            font-size: 50px;
        }
    </style>
    <script language="javascript" type="text/javascript">
        function indexOf(arr, element) {            //在Js中自己写indexOf方法；
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == element) {
                    return i;
                }
            }
            return -1;
        }

        function CommentLevel() {
            var CommentLevel = document.getElementById("CommentLevel");
            var tds = document.getElementsByTagName("td"); //获取CommentLevel表格下的td，不处理其他表格中的td;
            for (var i = 0; i < tds.length; i++) {
                var td = tds[i];    //获取每个td;
                td.onmouseover = TdOnClick;
                td.style.cursor = "pointer";
            }
        }

        function TdOnClick() {
            var CommentLevel = document.getElementById("CommentLevel");
            var tds = document.getElementsByTagName("td"); //获取CommentLevel表格下的td，不处理其他表格中的td;
            var index = indexOf(tds, this); //获取当前点击位置；

            for (var i = 0; i <= index; i++) {  //点击之前的都变红；
                tds[i].innerText="★";
            }

            for (var i = index + 1; i < tds.length; i++) {  //点击之后的是白色；
                tds[i].innerText="☆";
            }

        }
    </script>
</head>
<body onload="CommentLevel()">
    <table id="CommentLevel">
        <tr>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
        </tr>
    </table>
</body>
</html>