JS实现星级评分

时间 2019-11-17
原文原文链接
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>评星</title>
    <style type="text/css">
    .start ul li{
      width:50px;height:50px;
      display: inline-block;
      list-style: none;
      background-image: url('https://www.cnblogs.com/images/cnblogs_com/cat-eol/1452109/o_start.png');
      background-size: 100% 100%;
    }
    .start ul .startBg{
      background-image: url('https://www.cnblogs.com/images/cnblogs_com/cat-eol/1452109/o_start2.png');
    }
    </style>
  </head>
  <body>
    <div class="start">
      <ul class="startUl">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <h3 id="pingfen">暂无评价</h3>
    <script type="text/javascript">
      var startUl=document.getElementsByClassName('startUl')[0];
      var arr=startUl.children;
      var i;
      for(var i=0;i<arr.length;i++){
        arr[i].index=i;
        arr[i].onmouseover=function(e){
          // 清空
          for(var i=0;i<arr.length;i++){
            arr[i].className='';
            pingfen.innerHTML='暂无评价'
          }
          var number=this.index+1;//星星高亮个数
          //方法一
          var pingArr=['评价20分','评价40分','评价60分','评价80分','评价满分'];
          for (var i = 0; i < pingArr.length; i++) {
              pingfen.innerHTML=pingArr[number-1];
          }
          //方法二
          // if(number==5){
          //   pingfen.innerHTML='评价满分'
          // }else if (number==4) {
          //   pingfen.innerHTML='评价80分'
          // }
          // else if (number==3) {
          //   pingfen.innerHTML='评价60分'
          // }
          // else if (number==2) {
          //   pingfen.innerHTML='评价40分'
          // }
          // else if (number==1) {
          //   pingfen.innerHTML='评价20分'
          // }
          for(var i=0;i<=this.index;i++){
              // this.setAttribute("class", "startBg");
              arr[i].className='startBg';
          }
        }
      }

    </script>

  </body>
</html>
星星图片来源于https://www.iconfont.cn/search/index?searchType=icon&q=%E6%98%9Fjavascript