前端_星级评分效果

最新推荐文章于 2023-07-13 03:53:41 发布

我来C咯

最新推荐文章于 2023-07-13 03:53:41 发布

阅读量737

点赞数 1

分类专栏：工作中的小tips 文章标签：前端

本文链接：https://blog.csdn.net/weixin_46874084/article/details/123022481

版权

工作中的小tips 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

效果展示

实现代码

style部分

    body {
      margin: 0;
      padding: 0;
    }

    #starBox {
      height: 20px;
      width: 130px;
    }

    #starBox em {
      float: left;
      width: 26px;
      height: 20px;
      background: url(star.png) 0 -20px no-repeat;
    }

    #starNotice {
      font: 12px;
      width: 130px;
      text-align: center;
      margin-top: 5px;
      cursor: pointer;
    }

html部分

  <div id="starBox">
    <em></em>
    <em></em>
    <em></em>
    <em></em>
    <em></em>
  </div>
  <p id="starNotice"></p>

js部分

    window.onload = function () {
      var star = document.getElementsByTagName('em');
      var temp = 0;
      var temp1 = 0;

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

        document.getElementById('starBox').onmouseout = function () {
          if (temp) return
          document.getElementById('starNotice').style.display = 'none'
        }
        document.getElementById('starBox').onmouseover = function () {
          document.getElementById('starNotice').style.display = 'block'
        }

        // 鼠标经过
        star[i].onmouseover = function () {
          if (temp) return
          clear();
          for (var j = 0; j < this.index + 1; j++) {
            star[j].style.backgroundPosition = '0 0';
            temp1 = this.index + 1;
            document.getElementById('starNotice').innerHTML = temp1 + ' 颗星';
          }
        }

        // 鼠标移出
        star[i].onmouseout = function () {
          if (temp) return
          for (var j = 0; j < this.index + 1; j++) {
            star[j].style.backgroundPosition = '0 -20px';
            temp1 = this.index + 1;
            document.getElementById('starNotice').innerHTML = temp1 + ' 颗星';
          }
          current(temp);
        }

        // 点击后
        star[i].onclick = function () {
          if (temp) return
          temp = this.index + 1;
          document.getElementById('starNotice').innerHTML = temp + ' 颗星';
          current(temp);
        }
      }

      //清除所有
      function clear() {
        for (var i = 0, len = star.length; i < len; i++) {
          star[i].style.backgroundPosition = '0 -20px';
        }
      }
      //显示当前第几颗星
      function current(temp) {
        for (var i = 0; i < temp; i++) {
          star[i].style.backgroundPosition = '0 0';
        }
      }
    }