H5 - 实现半颗星评分功能

作者: 西半球_ | 来源:发表于2020-04-10 19:04 被阅读0次

H5 - 实现半颗星评分功能
这个五星评分,半颗星星怎么做功能我们应该怎么编写呢？
“精灵图”实现五星评分
【iOS】实现星级评分
App评分功能实现
女心理咨询师？就这？
实现评分星星by Swift
Android 调用已安装市场，进行软件评分的功能实现
iOS开发评分、打星
React如何实现五星评分/共5分

demo 地址: https://github.com/iotjin/JhAPICloud_iOS

效果图

20200410190529.jpg

代码

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>GridViewDemoList</title>
    <link rel="stylesheet" type="text/css" href="../../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />

    <style type="text/css">

    body {
        background-color: white;
    }

    .aui-bar{
      background: #45C01A;
    }


    .score_bg{
        background: white;
        padding-top: 15px;
    }
    .score_text1{
        margin-left: 15px;
        font-size: 15px;
    }
    .score_text2{
        margin-top: 5px;
        margin-left: 20px;
        font-size: 15px;
    }

    .star_bg0{
        margin-left: 50px;
        display: table;
    }
    .star_bg{
        background: yellow;
        position:relative;
        width: 50px;
        height: 50px;
        display: inline-block;
    }
    .starImg{
        position: absolute;
        z-index: 100;
        display: inline-block;
        width: 50px;
        height: 50px;
        pointer-events: none;
    }
    star_bg2{
        position: absolute;
        z-index: 80;
        display: inline-block;
    }

    .star{
        display: inline-block;
        width: 25px;
        height: 50px;
        background: orange;
    }

    .line1{
        border-bottom:1px solid gray;
    }
    .fen{
      margin-top: 100px;
      text-align: center;
    }


    </style>
</head>

<body>



  <header class="aui-bar aui-bar-nav baseThemeColor" id="header">
      <a class="aui-pull-left aui-btn" tapmode onclick="closeWin()">
          <span class="aui-iconfont aui-icon-left"></span>
      </a>
      <div class="aui-title">星星样式评分- 10分</div>
  </header>

  <div class="score_bg">
      <div class="score_text1">请问您对本次服务是否满意？</div>
      <div class="score_text2">（1-10评分，1分不满意，10分非常满意）</div>

  </div>

  <div class="star_bg0">

      <div class="star_bg">
          <img class="starImg" src="../../../image/evaluate_star.png">
          <div class="star_bg2">
              <div class="star" onclick="clickStar(1)"></div><div class="star" onclick="clickStar(2)"></div>
          </div>
      </div>

      <div class="star_bg">
          <img class="starImg" src="../../../image/evaluate_star.png">
          <div class="star_bg2">
              <div class="star" onclick="clickStar(3)"></div><div class="star" onclick="clickStar(4)"></div>
          </div>
      </div>

      <div class="star_bg">
          <img class="starImg" src="../../../image/evaluate_star.png">
          <div class="star_bg2">
              <div class="star" onclick="clickStar(5)"></div><div class="star" onclick="clickStar(6)"></div>
          </div>
      </div>

      <div class="star_bg">
          <img class="starImg" src="../../../image/evaluate_star.png">
          <div class="star_bg2">
              <div class="star" onclick="clickStar(7)"></div><div class="star" onclick="clickStar(8)"></div>
          </div>
      </div>

      <div class="star_bg">
          <img class="starImg" src="../../../image/evaluate_star.png">
          <div class="star_bg2">
              <div class="star" onclick="clickStar(9)"></div><div class="star" onclick="clickStar(10)"></div>
          </div>
      </div>

  </div>


  <div class="fen" id="fen">10分</div>


</body>




<script type="text/javascript" src="../../../script/api.js"></script>


<script>

  var selectfraction;
    apiready = function(){


    $api.fixStatusBar($api.byId('header'));



    }

  function closeWin(){
      api.closeWin({
      });
  }

  //星星 单选评价
  function clickStar(value) {
      event.stopPropagation();
      console.log('点击评分'+value);

      // $api.dom('.star').style.background = 'black';
      var items = $api.domAll(".star");
      for (var i = 0; i < items.length; i++) {
          items[i].style.background = 'white';
      }

      for (var j = 0; j < value; j++) {
          items[j].style.background = 'orange';
      }
      selectfraction = value;

      $api.byId('fen').innerHTML = selectfraction+'分';

  }


</script>

</html>