js实现评分效果

最新推荐文章于 2024-06-06 10:16:06 发布

进撃的小胖

最新推荐文章于 2024-06-06 10:16:06 发布

阅读量3.5k

点赞数 2

分类专栏： js常见应用文章标签：简单评分实现

本文链接：https://blog.csdn.net/qq_37194256/article/details/102710226

版权

js常见应用专栏收录该内容

2 篇文章 0 订阅

订阅专栏

js代码实现简单评分功能

我们经常可以在购物网站及快餐应用上看见评价页面,本文将讲述如何使用代码来实现评分效果;
具体实现的功能包括:
1、鼠标滑动点亮星星,移出时星星不亮;
2、鼠标点击可点亮星星,并且不可熄灭,同时,右侧出现对应评价;
3、点击已点亮的星星,不会更改先有的点亮颗数,同时,右侧评价也不会变.
代码如下:
html部分:

<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <p></p>
    </div>
</body>

css部分:

<style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            /* width: 1000px;
            height: 200px; */
            display: flex;
        }

        span {
            float: left;
            background: url(source/star.gif) 0 0 no-repeat;
            /* background-size: 100% 100%; */
            width: 27px;
            height: 29px;
        }

        p {
            float: left;
            height: 29px;
            line-height: 29px;
            /* background-color: #f00; */
        }
    </style>

js部分:
这部分重点在于为已点亮的星星一个表示,即设置一个数组,数组长度对应星星总颗数,数组元素有0/1两种取值,当星星是由点击事件点亮时,对应数组元素值与之前的数组元素值都为1,此时,鼠标移出不可熄灭;当星星是由鼠标移入事件点亮时,对应数组元素值为0,当鼠标移出时,判断对应数组元素值,为0时,移出熄灭星星.

<script>
    //只能从做往右依次点亮
    //点亮后再次移入会熄灭
    var div = document.querySelector("div");
    var s = document.querySelectorAll("span");
    var p = document.querySelector("p");
    var tip = ["差评", "不推荐", "一般", "推荐", "强烈推荐"];
    var flag = [];
    //点击事件
    for (var i = 0; i < s.length; i++) {
        flag.push(0);
        s[i].index = i;
        s[i].onclick = function () {
            for (var i = 0; i <= this.index; i++) {
                s[i].style.backgroundPositionY = "-29px";
                if (s[this.index].style.backgroundPositionY == "-29px" && flag[i] == 0) {
                    p.innerHTML = tip[this.index];
                    flag[i] = 1;
                }
            }
        }
    }

    for (var i = 0; i < s.length; i++) {
        s[i].index = i;

        //鼠标悬停移出事件
        s[i].onmouseenter = function () {
            for (var i = 0; i <= this.index; i++) {
                if (flag[i] == 0) {
                    s[i].style.backgroundPositionY = "-29px";
                }
            }
        }
        s[i].onmouseleave = function () {
            for (var i = this.index; i >= 0; i--) {
                if (flag[i] == 0) {
                    s[i].style.backgroundPositionY = "";
                }
            }

        }
    }

具体效果图如下:
在这里插入图片描述

进撃的小胖

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
js实现评分效果

js代码实现简单评分功能我们经常可以在购物网站及快餐应用上看见评价页面,本文将讲述如何使用代码来实现评分效果;具体实现的功能包括:1、鼠标滑动点亮星星,移出时星星不亮;2、鼠标点击可点亮星星,并且不可熄灭,同时,右侧出现对应评价;3、点击已点亮的星星,不会更改先有的点亮颗数,同时,右侧评价也不会变.代码如下:html部分:<body> <div> ...
复制链接

扫一扫

专栏目录