08-小星星评论(简单)

最新推荐文章于 2024-09-16 20:08:29 发布

沈川希

最新推荐文章于 2024-09-16 20:08:29 发布

阅读量120

点赞数

分类专栏： DOM基础文章标签： js javascript dom

本文链接：https://blog.csdn.net/weixin_45344023/article/details/107850977

版权

DOM基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

小星星评论（简单）

简述：鼠标放在星星上面，鼠标之前的星星都被点亮，鼠标之后的星星都是灰色的，并且星星可以随着鼠标移动而发生变化。

图片素材

rank_1.gif

rank_2.gif

rank_3.gif

rank_4.gif

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小星星</title>
</head>
<body>
    <p>用户评分：9 评分人数 10</p>
    <p>
        评分：
        <img src="images/rank_1.gif" alt="" /><img src="images/rank_2.gif" alt="" />
        <img src="images/rank_1.gif" alt="" /><img src="images/rank_2.gif" alt="" />
        <img src="images/rank_1.gif" alt="" /><img src="images/rank_2.gif" alt="" />
        <img src="images/rank_1.gif" alt="" /><img src="images/rank_2.gif" alt="" />
        <img src="images/rank_1.gif" alt="" /><img src="images/rank_2.gif" alt="" />
        <img src="images/rank_3.gif" alt="" /><img src="images/rank_4.gif" alt="" />
        <img src="images/rank_3.gif" alt="" /><img src="images/rank_4.gif" alt="" />
        <img src="images/rank_3.gif" alt="" /><img src="images/rank_4.gif" alt="" />
        <img src="images/rank_3.gif" alt="" /><img src="images/rank_4.gif" alt="" />
        <img src="images/rank_3.gif" alt="" /><img src="images/rank_4.gif" alt="" />
    </p>
    
</body>
</html>

无css

js部分

<script>
        var imgs = document.getElementsByTagName("img");
        for(var i = 0;i < imgs.length;i++)
        {
            imgs[i].index = i;
            imgs[i].addEventListener("mouseover",function(){
                for(let j = 0;j <= this.index;j++)
                {
                    let str = imgs[j].src;
                    let str1 = str.replace('rank_3.gif','rank_1.gif');
                    let str2 = str1.replace('rank_4.gif','rank_2.gif');
                    imgs[j].src = str2;
                }
                for(let k = this.index+1;k < imgs.length;k++)
                {
                    let str = imgs[k].src;
                    let str1 = str.replace('rank_1.gif','rank_3.gif');
                    let str2 = str1.replace('rank_2.gif','rank_4.gif');
                    imgs[k].src = str2;
                }
            })
        }
    </script>

运行效果
在这里插入图片描述