Javascript实现评分

<!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>Javascript实现评分</title>
</head>
<body onload="InitEvent()">
    <table id="tabMain">
        <tr>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
        </tr>
    </table>
</body>
</html>

<script type="text/javascript" language="javascript">
    function InitEvent() {
        //所有的标签都有getElementsByTagName，提供得到对应的标签
        var tabMain = document.getElementById("tabMain");
        var tds = tabMain.getElementsByTagName("td");
        //var tds = document.getElementsByTagName("td");
        for (var i = 0, j = tds.length; i < j; i++) {
            tds[i].onmousemove = tdOnmousemove; //给所有td添加onmousemove事件，鼠标移动上去事件
            tds[i].style.cursor = "pointer"; //使得鼠标移上去显示手状样式
            tds[i].onclick = tdOnclick;
        }
    }
    function tdOnmousemove() {
        var tabMain = document.getElementById("tabMain");
        var tds = tabMain.getElementsByTagName("td");
        //Javascript中定义数组
        //        1.var arr = new Array();
        //          arr[0] = "aaa";
        //          arr[1] = "bbb";
        //        2.[1,2,3]简化写法如var arr = [1,2,3]
        //        3.{"1":"aaa","2":"bbb"}定义element使用如var arr = {"1":"aaa","2":"bbb"}
        var indexof = IndexOf(tds, this);
        for (var i = 0, j = indexof; i < j; i++) {
            tds[i].innerText = "★";
        }
        for (var i = indexof, j = tds.length; i < j; i++) {
            tds[i].innerText = "☆";
        }
    }
    function tdOnclick() {
        var tabMain = document.getElementById("tabMain");
        var tds = tabMain.getElementsByTagName("td");
        alert("评分成功，您评的分数为：" + IndexOf(tds, this) + "分");
    }
    function IndexOf(arr, element) {
        for (var i = 0, j = arr.length; i < j; i++) {
            if (arr[i] == element) {
                return i + 1;
            }
        }
        return -1;
    }
</script>

 

posted @ 2013-04-25 11:52  ipangjie  阅读(211)  评论(0)    收藏  举报