请选择 进入手机版 | 继续访问电脑版
猿人社区
查看: 19|回复: 0

[干货] 原生JS 实现评分 五星评分 评级

[复制链接]

88

主题

88

帖子

429

积分

管理员

Rank: 9Rank: 9Rank: 9

注册时间
2018-7-24
最后登录
2018-12-8
在线时间
68 小时
威望
18
金钱
293
贡献
12
发表于 2018-12-4 13:26:19 | 显示全部楼层 |阅读模式


效果预览:



CSS代码:
  1. .pingfen { display:flex; width:650px; height:auto;} /* 最外层盒子 */
  2.     .pingfen .box { padding:10px; cursor:pointer; box-sizing:border-box; } /* 每一个盒子 也就是每一个级别 */
  3.     .pingfen .box .innerBox { padding-right:10px; text-align:center; width:100px; height:100px; line-height:100px; background:#F5F5F5; border-radius:10px; transition:all 0.2s linear; } /* 内层盒子 */
  4.     .pingfen .box.hover .innerBox { background:#198a4c; } /* 鼠标经过或者确认评分后的样式 */
复制代码



JS代码:代码的注释有点长基本思路是
假如有 12345 五个评分 也就是5个DOM
每个DOM加上索引 01234 不然当鼠标经过每个元素时 就不知道是第几个DOM了
每个DOM添加mouseenter 当鼠标经过时加上 鼠标经过的那个DOM 加上hover样式
当鼠标离开DOM的时候去掉所有DOM的hover样式
如果已经点击了其中一个DOM 也就是确认了评分 就把评分DOM的那个索引存下来
当鼠标离开时候 把已经确认评分的DOM 索引取出来 循环 把其他DOM 都加上hover样式 除了索引大过确认元素索引的元素
举栗子:
12345 五个评分 点击了 第四个DOM 也就是4
这时候就需要把 4以下的索引 321 元素加上hover样式
  1. let pingFen=document.querySelector(".pingfen");  //获取最外层盒子
  2.     let pingFenBox=document.querySelectorAll(".pingfen .box"); //获取每个评分级别
  3.     let boxIndex=-1;  //当前盒子索引为-1 -1就是没有
  4.     let selected=false;  //已经确认了评分? 默认为false 也就是没有
  5.     let selectedDOM=null; //确认评分的DOM为空
  6.     pingFenBox.forEach((val,ind)=>{  //循环每一个级别盒子 添加方法
  7.       val.setAttribute("index",ind);  //每个级别盒子添加个索引值
  8.       val.onmouseenter=function(e){  //每个级别盒子 添加鼠标进入方法
  9.         boxIndex=e.target.getAttribute("index");  //boxIndex值为鼠标经过的盒子的索引值
  10.         let index=e.target.getAttribute("index");  //index用于循环变量 值为鼠标经过的盒子的索引值
  11.         while(index>-1){  //循环 当index大于-1时就继续执行
  12.           let dom=document.querySelector(`.pingfen .box[index='${index}']`);  //当鼠标经过时,经过的那个元素 以及小过当前元素的索引元素都添加样式class
  13.           dom.classList.add("hover");
  14.           index--;
  15.           /*
  16.             有 12345 5个元素 经过的是索引4 元素 而索引321 元素都添加上 hover
  17.           */
  18.         }
  19.         /* 鼠标经过的元素 添加click监听
  20.             清除离开当前元素后的方法
  21.             selected(是否选中了级别) 改为true
  22.             selectedDOM(选中的元素的索引)
  23.             return 就是下面的代码不执行了
  24.          */
  25.         this.onclick=function(e){
  26.           this.onmouseleave=null;
  27.           selected=true;
  28.           selectedDOM=boxIndex;
  29.           return;
  30.         }
  31.         if(!selected){  //如果selected(是否选中了级别) 为false
  32.           this.onmouseleave=function(e){  //当前鼠标经过的元素添加一个离开方法 就是鼠标离开了当前鼠标所在位置下的元素
  33.           pingFenBox.forEach((value,index)=>{
  34.             //把所有级别DOM 都去掉hover
  35.             value.classList.remove("hover");
  36.           });
  37.           pingFen.onmouseleave=function(){
  38.             //pingFen 是最外层盒子 添加离开pingFen盒子后的动作
  39.             if(selectedDOM!=null){  //如果selectedDOM不等于null 也就是已经确认了级别
  40.             let index=selectedDOM;  //index变量用于循环  值为确认级别的那个元素的索引值
  41.             while(index>-1){  //用index循环 如果index小于-1就退出
  42.               let dom=document.querySelector(`.pingfen .box[index='${index}']`);
  43.               dom.classList.add("hover");
  44.               index--;
  45.               /*
  46.                 给每一个小于index的索引元素 都加上 hover样式
  47.                 如果 有 12345五个级别的评分
  48.                 选中了4 剩下321 就是把4321每个元素加上hover
  49.               */
  50.             }
  51.             }
  52.           }
  53.         }
  54.       }
  55.       selected=false;
  56.       }
  57.     });
复制代码


全代码:
  1. <body>

  2.   <style>
  3.     .pingfen { display:flex; width:650px; height:auto;} /* 最外层盒子 */
  4.     .pingfen .box { padding:10px; cursor:pointer; box-sizing:border-box; } /* 每一个盒子 也就是每一个级别 */
  5.     .pingfen .box .innerBox { padding-right:10px; text-align:center; width:100px; height:100px; line-height:100px; background:#F5F5F5; border-radius:10px; transition:all 0.2s linear; } /* 内层盒子 */
  6.     .pingfen .box.hover .innerBox { background:#198a4c; } /* 鼠标经过或者确认评分后的样式 */
  7.   </style>

  8.   <div class="pingfen">
  9.     <div class="one box">
  10.       <div class="innerBox">1</div>
  11.     </div>
  12.     <div class="two box">
  13.         <div class="innerBox">2</div>
  14.     </div>
  15.     <div class="three box">
  16.         <div class="innerBox">3</div>
  17.     </div>
  18.     <div class="four box">
  19.         <div class="innerBox">4</div>
  20.     </div>
  21.     <div class="five box">
  22.         <div class="innerBox">5</div>
  23.     </div>
  24.   </div>

  25.   <script>
  26.     let pingFen=document.querySelector(".pingfen");
  27.     let pingFenBox=document.querySelectorAll(".pingfen .box");
  28.     let boxIndex=-1;
  29.     let selected=false;
  30.     let selectedDOM=null;
  31.     pingFenBox.forEach((val,ind)=>{
  32.       val.setAttribute("index",ind);
  33.       val.onmouseenter=function(e){
  34.         boxIndex=e.target.getAttribute("index");
  35.         let index=e.target.getAttribute("index");
  36.         while(index>-1){
  37.           let dom=document.querySelector(`.pingfen .box[index='${index}']`);
  38.           dom.classList.add("hover");
  39.           index--;
  40.         }
  41.         this.onclick=function(e){
  42.           this.onmouseleave=null;
  43.           selected=true;
  44.           selectedDOM=boxIndex;
  45.           return;
  46.         }
  47.         if(!selected){
  48.           this.onmouseleave=function(e){
  49.           pingFenBox.forEach((value,index)=>{
  50.             value.classList.remove("hover");
  51.           });
  52.           pingFen.onmouseleave=function(){
  53.             if(selectedDOM!=null){
  54.             let index=selectedDOM;
  55.             while(index>-1){
  56.               let dom=document.querySelector(`.pingfen .box[index='${index}']`);
  57.               dom.classList.add("hover");
  58.               index--;
  59.             }
  60.             }
  61.           }
  62.         }
  63.       }
  64.       selected=false;
  65.       }
  66.     });
  67.   </script>

  68. </body>
复制代码

不太会写技术文档

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?入住社区

x
您需要登录后才可以回帖 登录 | 入住社区

本版积分规则

Archiver|手机版|小黑屋|Deaf community

GMT+8, 2018-12-12 20:38 , Processed in 0.052883 second(s), 19 queries .

Powered by Discuz! X3.4© 2001-2017 Comsenz Inc. Template design by Penday

快速回复 返回顶部 返回列表