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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。