js案例思路解析——五星评分效果

最新推荐文章于 2024-03-16 18:17:31 发布

123

最新推荐文章于 2024-03-16 18:17:31 发布

阅读量1.1k

点赞数 5

文章标签： html css html5

本文链接：https://blog.csdn.net/weixin_45048086/article/details/120207255

版权

js案例思路解析——五星评分效果

将结构和样式放前面是为了让思路更清晰，也可以先看后面的步骤，再回来看着两部分辅助理解。

一、结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div id="star">
        <span>点击星星就能打分</span>
        <ul>
            <li><a href="javascript:;">1</a></li>
            <li><a href="javascript:;">2</a></li>
            <li><a href="javascript:;">3</a></li>
            <li><a href="javascript:;">4</a></li>
            <li><a href="javascript:;">5</a></li>
        </ul>
        <!-- 选中后显示解释语句 -->
        <span></span>
        <!-- 选择中显示解释语句 -->
        <p>选择解释</p>
    </div>
</body>
</html>

二、样式

<style>
    body {
        color: #666;
        font: 12px/2 Arial;
    }

    #star {
        margin: 10px auto;
        /* border: 1px solid red; */
        width: 800px;
        position: relative;
        /*设置定位给p标签参考*/
    }

    ul {
        list-style-type: none;
        /* border: 1px solid green; */
        margin: 0px 10px;
        /*必须设置外边距才能上去*/

    }

    ul,
    span {
        float: left;
    }

    ul li {
        float: left;

        background: url('./images/star.png') no-repeat;
        text-indent: -9999px;
        /* 隐藏a标签中的文本 */
        width: 24px;
        margin: 0px;

    }
    #star li.on {
        /* 星星点亮之后的状态 */
        background-position: 0 -28px;
    }
    
    p {
        /*后面要根据鼠标变动,更改p,所以要设置定位*/
        /* border: 1px solid blue;  */
        position: absolute;
        top: 20px;
        width: 200px;
        display: none;
    }

    p em {
        color: #f60;
        display: block;
        font-style: normal;
    }

    strong {
        color: #f60;
        padding-left: 20px;
    }
</style>

三、步骤

获取节点和定义一个变量保存选中的星星中最后一个的索引值setScore，默认值设为0,给每颗星星绑定鼠标移入、移出和点击事件;
准备一个星星状态改变的函数sel,传入一个参数index（一个位置下标）,在这个下标之前的星星都添加类名"on",之后的都将类名"on"移除;
移入事件:显示解释性文本，计算解释性文本的位置（即left的值），并拿到解释性文本的内容，调用星星状态改变函数sel,传入参数为当前星星的索引值+1;
移出事件：隐藏解释性文本，并调用星星状态改变函数sel,传入参数为setScore;
点击事件：获取最后选中的星星对应的评分，并放入所有星星后面的span标签（预留的文本显示区域），调用星星改变状态的函数sel，传入参数为setScore;

四、步骤实现

采用的方式是es6的类的方式，所以后面的代码都是在类里面的。需要注意的是一定要在外面实例化类，不然这个代码都不会执行。

获取节点和定义一个变量保存选中的星星中最后一个的索引值setScore，默认值设为0,给每颗星星绑定鼠标移入、移出和点击事件;

        constructor() {
            // 解释性文本
            this.msg = [
                "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
                "不满意|部分有破损，与卖家描述的不符，不满意",
                "一般|质量一般，没有卖家描述的那么好",
                "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
                "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
            ];
            // 保存最后一次点击的索引
            this.setScore = 0;

            // 获取节点
            this.ulObj = this.$("ul");
            this.lisObj = this.ulObj.children;
            this.spanObj = this.ulObj.nextElementSibling;
            this.pObj = this.$("p");


            // 给li绑定移入移出事件和点击事件
            Array.from(this.lisObj).forEach((li, k) => {
                // console.log(this);
                li.addEventListener("mouseover", this.overFn.bind(this, k));
                li.addEventListener("mouseout", this.outFn.bind(this, k));
                li.addEventListener("click", this.clickFn.bind(this, k));
            });
        }

        /* 
         * 获取节点对象
         * @param tag 获取的节点的选择器
        */
        $(tag) {
            return document.querySelector(tag);
        }

准备一个星星状态改变的函数sel,传入一个参数index（一个位置下标）,在这个下标之前的星星都添加类名"on",之后的都将类名"on"移除;

        /* 
         * 星星的改变 
         * @param index 位置索引
        */
        sel(index) {
            for (let i = 0; i < this.lisObj.length; i++) {
                i < index ? this.lisObj[i].classList.add("on") : this.lisObj[i].classList.remove("on");
            }
        }

移入事件:显示解释性文本，计算解释性文本的位置（即left的值），并拿到解释性文本的内容，调用星星状态改变函数sel,传入参数为当前星星的索引值+1;

        /* 
         * 移入 
         * @param index 当前星星的索引
         * @param event 鼠标事件，不用传值
        */
        overFn(index, event) {
            // 计算解释性文本的位置，显示p并改变其位置
            let left = event.target.offsetWidth * (index + 1) + this.ulObj.offsetLeft;
            this.pObj.style.display = "block";
            this.pObj.style.left = left + "px";

            // 设置解释性文本的内容
            let tmpMsg = this.msg[index].split("|");
            this.pObj.innerHTML = '<em><strong>' + tmpMsg[0] + '</strong></em>' + tmpMsg[1];

            // 选中选择之前的所有星星
            this.sel(index + 1);

        }

移出事件：隐藏解释性文本，并调用星星状态改变函数sel,传入参数为setScore;

        /* 
         * 移出 
         * @param index 当前星星的索引
         * @param event 鼠标事件，不用传值
        */
        outFn(index, event) {
            this.pObj.style.display = "none";
            this.sel(this.setScore);
        }

点击事件：获取最后选中的星星对应的评分，并放入所有星星后面的span标签（预留的文本显示区域），调用星星改变状态的函数sel，传入参数为setScore;

        /* 
         * 点击 
         * @param index 当前星星的索引
         * @param event 鼠标事件，不用传值
        */
        clickFn(index, event) {
            // 设置span的内容
            let tmpMsg = this.msg[index].split("|");
            this.spanObj.innerHTML = '<strong>' + tmpMsg[0] + '</strong>' + tmpMsg[1];
            // 改变星星的状态
            this.setScore = index + 1;
            this.sel(this.setScore);
        }