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

原创已于 2022-07-05 22:26:35 修改 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

椿湫、春秋、不朽！

文章标签：

#html5 #javascript #css #前端

于 2022-07-05 19:14:43 首次发布

本文介绍了如何使用原生JavaScript创建一个星级评分系统。通过HTML布局、CSS样式设计以及JavaScript事件处理，实现了星星选择和满意度显示的功能。文章分为HTML结构、CSS样式和JavaScript逻辑三部分进行详细讲解，并提供了效果预览。

先理思路：

第一部分：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'
        }
    }

效果预览图：