用Javascript实现星星评分功能实力代码，即鼠标放在星星上，星星自动亮且提交评分

JavaScript实现星星评分特效，即鼠标放在星星上，星星自动亮且提交评分

• CSS样式

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

        .box {
            width: 800px;
            height: 20px;
            background-color: pink;
            display: flex;
        }

        .box ul {

            margin-left: 20px;
        }

        .box ul li {
            list-style: none;
            width: 20px;
            height: 20px;
            background-image: url(./星星/star.png);
            float: left;
            margin: 0px 5px;
            position: relative;
            /* background-position: 0px -27px; */
        }

        .box ul li div {
            width: 200px;
            height: 60px;
            border: 1px solid #ccc;
            font-size: 14px;
            position: absolute;
            left: 0;
            top: 20px;
            display: none;
        }

        .box ul li .current {
            display: block;
        }
    </style>

• body结构

<div class="box">
        <h4>星星点亮评分</h4>
        <ul>
            <li>
                <div class="dv">
                </div>
            </li>
            <li>
                <div class="dv">
                </div>
            </li>
            <li>
                <div class="dv">
                </div>
            </li>
            <li>
                <div class="dv">
                </div>
            </li>
            <li>
                <div class="dv">
                </div>
            </li>
        </ul>
        <p id="txt"></p>

    </div>

• script实现

<script>
        //获取元素
        var lis = document.getElementsByTagName('li');
        var divs = document.getElementsByClassName('dv');

        var arr = ['1分,很不满意', '2分，不满意', '3分，一般', '4分，满意', '5分，非常满意'];
        var str = [
            '差的太离谱，与卖家描述的严重不符，非常不满意，',
            '部分有破损，与卖家描述不符，不满意',
            '部分有破损，与卖家描述不符，不满意',
            '部分有破损，与卖家描述不符，满意',
            '质量很好'
        ]

        for (var i = 0; i < lis.length; i++) {
            // 为每个li设置index属性，把下标存放进去，以便鼠标移进去时，找到所对应的li
            lis[i].setAttribute('index', i);

            // 每个li注册鼠标移入事件
            lis[i].onmouseenter = function () {
                // 获取index存放的下标
                var num = this.getAttribute('index');
                // 相应的星星以及前面的星星点亮
                for (var j = 0; j <= num; j++) {
                    lis[j].style.backgroundPositionY = '-27px';
                }

                //排他功能
                for (var n = 0; n < divs.length; n++) {
                    divs[n].style.display = 'none';
                }

                this.firstElementChild.style.display = 'block';
                this.firstElementChild.innerHTML = '
' + arr[num] + '
' +
                    '
' + str[num] + '
'
            }

            // 为每个小星星注册鼠标离开的事件
            lis[i].onmouseleave = function () {
                // 获取index存放的下标
                var num = this.getAttribute('index');
                for (var j = 0; j <= num; j++) {
                    // 相应的星星以及前面的星星变为灰色
                    lis[j].style.backgroundPositionY = '0px';
                }
                // 当前div隐藏
                this.firstElementChild.style.display = 'none';

            }

            //为每个小星星li注册点击事件
            lis[i].onclick = function () {
                //获取index存放的下标
                var num = this.getAttribute('index');

                //排他功能
                for (var k = 0; k < lis.length; k++) {
                    lis[k].style.backgroundPositionY = '0';
                }

                //1.相应的星星点亮以及前边的星星点亮
                for (var i = 0; i <= num; i++) {
                    lis[i].style.backgroundPositionY = '-27px';
                }
                //3.隐藏当前的div
                this.firstElementChild.style.display = 'none';
                txt.innerHTML = '' + arr[num] + '' + '' + str[num] + '';

                //2.解绑事件
                for (var j = 0; j < lis.length; j++) {
                    lis[j].onmouseleave = null;
                    lis[j].onmouseenter = null;
                }
            }
        }
    </script>