javascript 模拟评分控件

最新推荐文章于 2023-08-03 17:44:06 发布

原创最新推荐文章于 2023-08-03 17:44:06 发布 · 692 阅读

0 ·

CC 4.0 BY-SA版权

Javascript 专栏收录该内容

56 篇文章

订阅专栏

通过JavaScript实现动态评分效果，包括点击评分后元素颜色变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>动态设置style(评分效果)</title>
    <script type="text/javascript">
        //查找一个元素在数组中的索引位置
        function ArrayIndexOf(arr, element) {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == element) {
                    return i;
                }
            }
            return -1;
        }
        function IniEvent() {
            var tbl = document.getElementById("tblRating");
            var tds = tbl.getElementsByTagName("td");
            for (var i = 0; i < tds.length; i++) {
                var td = tds[i];
                td.onclick = tdOnClick;
                td.style.cursor = "pointer"; //设置光标手型
            }
        }
        function tdOnClick() {
            var tbl = document.getElementById("tblRating");
            var tds = tbl.getElementsByTagName("td");

//查找当前点击的td的索引
var index = ArrayIndexOf(tds, this);

            //之前的td改为红色
            for (var i = 0; i <= index; i++) {
                tds[i].style.background = "red";
            }

            //之后的td改为白色
            for (var i = index + 1; i < tds.length; i++) {
                tds[i].style.background = "white";
            }
        }
    </script>
</head>
<body onload="IniEvent()">
    <table id="tblRating">
    <tr>
        <td>★</td>
        <td>★</td>
        <td>★</td>
        <td>★</td>
        <td>★</td>
    </tr>
    </table>
</body>
</html>