js版星级评分 入门级 原生js实现

先理思路：

第一部分：HTML

 第二部分：CSS

​​​​​​1.常规部分 通配符

 2.居中盒子部分

3. li标签（星星载体）部分

 4.满意度盒子部分

5.评语盒子部分

 

 6.星星改变位置部分

 第三部分：JS

1.创建数组、查找标签、定义变量

 2.外部大循环、然后绑定三种事件

  for (let i = 0; i < lis.length; i++) {
        // 给每个星星创建一个自定义属性
        lis[i].dataset.index = i + 1
        // 创建鼠标移入事件
        lis[i].onmouseenter = function () {
            // 添加鼠标移入星星激活
            lis[i].classList.add('bs')
            // 评语部分只要数组每一项|前边的部分
            py.innerHTML = pj[i].split('|')[1]
            // 评语盒子随着所对应的星星位置向右移动
            py.style.marginLeft = `${(i + 1) * 30}px`
            for (let index = 0; index < lis.length; index++) {
                // 每一个li标签加一个类名用来比较  index这个变量索引值赋给了对应的星星  鼠标移入某个星星的时候 
                // 拿index与i这个索引值进行比较 小于等于i这个索引值的星星全部激活
                lis[index].classList = index <= i ? 'bs' : ''
            }
            // 评语部分显示   鼠标移动的时候评语随着星星变化而变化  
            py.style.display = 'block'
        }
        // 创建鼠标点击事件
        lis[i].onclick = function () {
            // 记录当前点击的星星位置
            jl = this.dataset.index
            // 评语部分隐藏
            py.style.display = 'none'
            // 满意度部分只要数组每一项|后边的部分
            myd.innerHTML = jl + '分' + '&nbsp;&nbsp;' + pj[jl - 1].split('|')[0]
        }
        // 创建鼠标移出事件
        lis[i].onmouseleave = function () {
            for (let index = 0; index < lis.length; index++) {
                // 每一个li标签加一个类名用来比较  index这个变量索引值赋给了对应的星星  
                // 鼠标移入某个星星的时候 拿index与记录的星星位置比较  索引值小于记录的位置执行右边的条件 
                lis[index].classList = index < jl ? 'bs' : ''
            }
            py.style.display = 'none'
        }
    }

 效果预览图：

到这里就结束啦，有问题留言哦