原生JS类淘宝评分效果知识点梳理

最新推荐文章于 2020-11-09 20:51:56 发布

表演者7号

最新推荐文章于 2020-11-09 20:51:56 发布

阅读量369

点赞数 2

分类专栏： js基础文章标签： js

本文链接：https://blog.csdn.net/biaoyan01/article/details/109549497

版权

js基础专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JS类APP评分效果梳理

老规矩拿Dom中的oUl和oLis和oDiv的元素，推荐用querySelector。
创建一个数组lits来容纳评分的文字等级
var list=[“差”,“中”,“强”,“很强”,“666”]; var pointer=-1 用来计数
用for循环拿出oLis的脚标
for (var i = 0; i < oLis.length; i++) {
oLis[i].index = i;
写一个鼠标划入预览的效果事件oLis[i].onmouseenter
oLis[i].onmuseenter=function(){
oDiv.innerHTML=list[Math.max(this.index,point)];
for(var i=0;i<oLis.length;i++){
判断鼠标放的脚标让左边的星亮if(i<Math.max(this.index,point)){
oLis[i].classList.add(“active”)
否则清除else{oLis[i].classList.remove(“active”)}}}
写一个鼠标移出效果消失的事件oLis[i].onmouseleave
oLis[i].οnmοuseleave=function(){
for(var i=0;i<oLis.length;i++){
判断如果点亮的就让继续保持if(i<point){oLis[i].classList.add(‘active’)
否则清除else{oLis[i].classList.remove(“active”)}}
显示有几颗亮 oDiv.innerHTML = point < 0 ? ‘’ : list[point];}
点击星星时让亮的保留下来创建一个点击事件oLis[i].onclick
oLis[i].οnclick=function(){
判断保持第二次比第一更高if(this.index<point)return
否则将点击的脚标给计数point=this.index}}
详细的代码如下
body代码

 ` <style>
    #ul {
      padding: 0;
      margin: 0;
      list-style: none;
      display: inline-block;
      vertical-align: middle;
      height: 28px;
    }

    #div {
      display: inline-block;
      vertical-align: middle;
      margin-left: 10px;
    }

    #ul li {
      float: left;
      background: url("../source/star.gif") no-repeat 0 0;
      width: 27px;
      height: 28px;
    }

    #ul li.active {
      background: url("../source/star.gif") no-repeat 0 -29px;
    }
  </style>
</head>

<body>
  <ul id="ul">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div id="div"></div>
</body>`

js代码如下

<script>
  var oUl = document.querySelector('#ul');
  var oLis = document.querySelectorAll('#ul li');
  var oDiv = document.querySelector('#div');

  var list = ['差', '中', '强', '贼强', '666'];

  var point = -1;     // 记录用户点击选择的评分


  for (var i = 0; i < oLis.length; i++) {
    oLis[i].index = i;

    oLis[i].onmouseenter = function () {
      oDiv.innerHTML = list[Math.max(this.index, point)];

      for (var i = 0; i < oLis.length; i++) {
        // 左边亮  右边不亮
        if (i <= Math.max(this.index, point)) {
          oLis[i].classList.add('active')
        } else {
          oLis[i].classList.remove('active')
        }
      }
    }
    oLis[i].onmouseleave = function () {

      for (var i = 0; i < oLis.length; i++) {
        // 点击左边的亮   右边的不亮
        if (i <= point) {
          oLis[i].classList.add('active')
        } else {
          oLis[i].classList.remove('active')
        }
      }
      oDiv.innerHTML = point < 0 ? '' : list[point];
    }

    oLis[i].onclick = function () {
      if (this.index < point) return;      // 控制二次评分只能更高
      point = this.index;
    }




  }

表演者7号

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS类淘宝评分效果知识点梳理

JS类APP评分效果梳理老规矩拿Dom中的oUl和oLis和oDiv的元素，推荐用querySelector。创建一个数组lits来容纳评分的文字等级var list=[“差”,“中”,“强”,“很强”,“666”]; var pointer=-1 用来计数用for循环拿出oLis的脚标for (var i = 0; i < oLis.length; i++) {oLis[i].index = i;写一个鼠标划入预览的效果事件oLis[i].onmouseenteroLis[i].o
复制链接

扫一扫