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'}}

效果预览图：

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

js版星级评分入门级原生js实现相关推荐

js 封装ajax方法吗,原生JS封装ajax方法
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...
原生js实现星级评分
今天来实现下星级评分,后边并跟有评价文字. html代码如下: <span class="star"><b class="ct-star ic-star ...
js实现星级评分效果（非常规5个li代码）
1. 前言此方案受到JS单行写一个评级组件启发,自己写了一个简单Demo. 功能有正常滑动,动态显示实心星星个数:当点击确认,则保持当前的实心星星个数:再移动时未点击,则离开后还是保持之前的状态. ...
（商品评价页）商品星级评分html+css+js
html部分: <div class="evaluate_main"><div class="evaluate_title"><d ...
原生js写三级联动 java_原生js三级联动的简单实现代码
本文实例为大家分享了js查询天气应用,供大家参考,具体内容如下实现功能:打开网页时显示用户所在城市的天气状况,在输入框输入城市可查询其它城市. 实现过程:先调用百度地图的API来获取用户所在的城市, ...
vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
js异步请求php数据,原生JS发送异步数据请求实例详解
这篇文章主要为大家详细介绍了原生JS发送异步数据请求的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下在做项目的时候,有时候需要用到异步数据请求,但是如果这个时候没有框架的依赖,就需要用到 ...
html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分 ...
js 写html代码编辑器,原生JS写一个功能强大的编辑器
因为一个同学,要做一个能加入图片的留言板功能,类型与QQ空间留言板和百度贴吧发帖的那种形式,同时在网上找了找发生网上对这方面的交流很少,所以发表这篇文章抛砖引玉,希望能帮助广大的学习者,也同时希望大佬 ...

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

js版星级评分入门级原生js实现相关推荐

最新文章

热门文章

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

js版星级评分 入门级 原生js实现相关推荐

最新文章

热门文章

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

js版星级评分入门级原生js实现相关推荐