JS实现星星评论功能

最新推荐文章于 2024-04-19 10:18:52 发布

且听风雨且观尘

最新推荐文章于 2024-04-19 10:18:52 发布

阅读量1k

点赞数

分类专栏： JS 前端文章标签： JS 前端评分

本文链接：https://blog.csdn.net/yujianxin1995/article/details/81352131

版权

JS 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

昨日第三份作业，利用JS实现星星的评论功能，要求最低能够实现半个星星的评论。思路如下：

提示1：给每个img图片绑定鼠标移上去事件，当鼠标移动到某张图片上时，那么这张图片左侧的图片（包括该图片本身）都修改为黄色的星星，该图片右侧的图片都修改为灰色的星星即可。

提示2：只修改图片的src属性即可。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img{
            float: left;
        }
    </style>
</head>
<body>
<img src="images/rank_3.gif" />
<img src="images/rank_4.gif" />
<img src="images/rank_3.gif" />
<img src="images/rank_4.gif" />
<img src="images/rank_3.gif" />
<img src="images/rank_4.gif" />
<img src="images/rank_3.gif" />
<img src="images/rank_4.gif" />
<img src="images/rank_3.gif" />
<img src="images/rank_4.gif" />
<script>
    var img = document.querySelectorAll('img'); 
    for(var i =0;i<img.length;i++){
           img[i].index=i;
        img[i].onmouseover = function(){
           for(var k =0;k<this.index+1;k++){//i的值传不过来，在解析过程中for循环自动循环完毕，i即为img.length,因此不管鼠标事件到哪里，都是星星全部点亮，故为解决这个问题，使用this.index来标志鼠标节点
               if(k==0||k%2==0){
                   img[k].src="images/rank_1.gif";
               }else{
                   img[k].src="images/rank_2.gif";
               }
           }
        }
    }
</script>
</body>
</html>

且听风雨且观尘

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS实现星星评论功能

昨日第三份作业，利用JS实现星星的评论功能，要求最低能够实现半个星星的评论。思路如下：提示1：给每个img图片绑定鼠标移上去事件，当鼠标移动到某张图片上时，那么这张图片左侧的图片（包括该图片本身）都修改为黄色的星星，该图片右侧的图片都修改为灰色的星星即可。提示2：只修改图片的src属性即可。&lt;!doctype html&gt;&lt;html lang="en"&gt;&...
复制链接

扫一扫