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

如图:

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

<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>

原文发布于微信公众号 - Golang语言社区(Golangweb)

原文发表时间:2016-01-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券