网页中评分效果原理。

浏览数：19 / 时间：2015年06月09日

哈哈，只是简单的原理（代码可能不是这样写的），明白原理就好～～～～～

    <title></title>
    <style type="text/css">
        td {
            font-size: 5px;
            cursor: default;
        }
    </style>
</head>
<body>

    <table id="Star">
        <tr>
            <td>☆</td>
        </tr>

        <tr>
            <td>☆</td>
        </tr>

        <tr>
            <td>☆</td>
        </tr>

        <tr>
            <td>☆</td>
        </tr>

        <tr>
            <td>☆</td>
        </tr>
    </table>
</body>
</html>
<script type="text/javascript">
    ///未点击之前每个元素都有mouseover,mouseout事件，
    ///点击之后，每个元素都取消mouseover,mouseout事件，
    ///每个元素点击(包含此元素)之前变黑，之后(不包含)变白。
    var len = 0;
    //if (arguments[0].__proto__.constructor.name == ‘MouseEvent‘) {
    //    idEnd = arguments[0].srcElement.id;
    //} if (arguments[0].__proto__.constructor.name == ‘HTMLTableCellElement‘) {
    //    idEnd = arguments[0].id;
    //}
    var BGChangNull = function (low, high) {
        for (var i = low; i <= high; i++) {
            document.getElementById(i).innerHTML = ‘☆‘;
        }
    };
    var BGChangeValue = function (low, high) {
        for (var i = low; i <= high; i++) {
            document.getElementById(i).innerHTML = ‘★‘;
        }
    };
    var BGChangeAble = function (bool) {
        for (var i = 0; i < len; i++) {
            document.getElementById(i).onmouseover.disabled = bool;
            document.getElementById(i).onmouseout.disabled = bool;
        }
    };
    var BGChangeOver = function () {
        var idEnd = this.id;
        if (!this.onmouseover.disabled) {
            BGChangeValue(0, idEnd);
        }
    };
    var TDChangeOut = function () {
        var idEnd = this.id;
        if (!this.onmouseout.disabled) {
            BGChangNull(0, idEnd);
            ////var idEnd = this.id;
            //BGChangNull(0, this.id);
            ////this.onmouseover.disabled = true;
        }
        //else {
        //    this.onmouseout.disabled = true;
        //}
    };
    var TDOnclick = function () {//点击后改变over事件
        var idEnd = this.id;
        BGChangeValue(0, idEnd);
        BGChangNull(++idEnd, len - 1);
        BGChangeAble(true);
        document.getElementsByTagName(‘span‘)[0].innerText = idEnd;
    };
    window.onload = function () {
        var tds = document.getElementById(‘Star‘).getElementsByTagName(‘td‘);
        len = parseInt(tds.length);
        for (var i = 0; i < len; i++) {
            tds[i].id = i;
            tds[i].onmouseover = BGChangeOver;
            tds[i].onmouseout = TDChangeOut;
            tds[i].onclick = TDOnclick;
        }
        var sp = document.createElement(‘span‘);
        document.body.appendChild(sp);
    };
</script>