首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS 评分五角星随鼠标移动显示

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

作者头像
李海彬
发布2018-03-20 10:14:25
3.4K0
发布2018-03-20 10:14:25
举报
文章被收录于专栏:Golang语言社区Golang语言社区

如图:

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

<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>
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2016-01-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Golang语言社区 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档