JS 评分五角星随鼠标移动显示

李海彬

发布于 2018-03-20 02:14:25

3.5K00

代码可运行

文章被收录于专栏：Golang语言社区Golang语言社区

运行总次数：0

代码可运行

如图：

当鼠标放到哪个星星上时，之前的星星显示黑色星，之后的显示黑色星

<head>

    <title></title>

<script type="text/javascript">

        function indexOf(arr, element) {                //传入array数组和当前值

for (var i =0; i < arr.length; i++) {

                if (arr[i] == element) {                //第i个值等于当前值

return i;                        //返回i

                }

            }

            return-1;

        }

        function initEvent() {

            var rating = document.getElementById("rating");            //取id为rating的标签

var tds = rating.getElementsByTagName("td");            //在id为rating标签下去名字为td的值

for (var i =0; i < tds.length; i++) {                    //遍历

var td = tds[i];

                td.style.cursor ='pointer';                        //设置鼠标显示形式

                td.onmouseover =function() {                    //当鼠标移动时… …

var rating = document.getElementById("rating"); //不用担心和initEvent中的rating、tds变量冲突，因为他们是两个函数，只是写在了一起而已。

var tds = rating.getElementsByTagName("td");

                    var index = indexOf(tds, this);                //调用函数indexof计算鼠标当前为值

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="initEvent()">

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

</body>