五角星评分控件

最新推荐文章于 2022-08-18 11:08:27 发布

原创最新推荐文章于 2022-08-18 11:08:27 发布 · 254 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#五角星评分控件.html

Javascript、JQuery练习专栏收录该内容

69 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <style type="text/css">
        table {
            position: absolute;
            left:600px;
            top:300px;
        }

        td {
            width: 60px;
            height: 50px;
            /*border: 1px solid red;*/
            background-image: url('images/star.JPG');
            background-position:125px 0;
        }

        #divBack {
            height: 1000px;
            background-color: black;
        }
    </style>
    <div id="divBack">
        <table>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
        window.onload = function () {
            //得到所有的td标签
            var tdObjs = document.getElementsByTagName('td');
            for (var i = 0; i < tdObjs.length; i++) {
                tdObjs[i].onmouseover = function () {//给所有td标签注册鼠标悬浮事件
                    for (var j = 0; j < tdObjs.length; j++) {
                        //将触发事件的表格以及它之前的表格的图片位置改变
                        tdObjs[j].style.backgroundPosition = '0 0';
                        if (tdObjs[j] == this) {//循环到触发事件的元素停止
                            break;
                        }
                    }
                };
                tdObjs[i].onmouseleave = function () {//为每一个td注册鼠标离开事件
                    for (var j = 0; j < tdObjs.length; j++) {
                        //在鼠标离开单元格的时候，不包含isClicked属性的恢复原来的图片位置
                        if (!tdObjs[j].hasAttribute('isClicked')) {
                            tdObjs[j].style.backgroundPosition = '125px 0';
                        }
                    }
                };
                tdObjs[i].onclick = function () {
                    var index = -1;//记录触发事件的单元格的索引
                    for (var j = 0; j < tdObjs.length; j++) {
                        //将触发事件的元素及其之前的元素都添加一个isClicked属性
                        tdObjs[j].setAttribute('isClicked', 'isClicked');
                        if (tdObjs[j] == this) {
                            index = j + 1;
                            break;//循环到触发事件的单元格停止
                        }
                    }
                    for (var j = index; j < tdObjs.length; j++) {
                        //将触发事件的单元格之后的所有元素移除他们的isClicked属性
                        tdObjs[j].removeAttribute('isClicked');
                    }
                    for (var j = 0; j < tdObjs.length; j++) {
                        //循环遍历所有单元格，不包含isClicked属性的恢复原来的图片位置
                        if (!tdObjs[j].hasAttribute('isClicked')) {
                            tdObjs[j].style.backgroundPosition = '125px 0';
                        }
                    }
                };
            }
        };
    </script>
</body>
</html>