一行代码实现星级评分 "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);

"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate); //rate是0～5的整数
//或者：
"★".repeat(rate) + "☆".repeat(5-rate);

demo： demo

github源码地址： https://github.com/zc95/star-rating

博客地址： https://zc95.github.io/2018/01/23/star-rating/

实现原理

Link

• demo
• github

主要代码

css

.score_wrapper {
      display:inline-block;
      font-size: 45px;
      cursor: pointer;
      color: #dc2020;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
    }

html

<div class="score_wrapper"></div>

javascript

    $(function () {
      ScoreInit(3); //初始化，参数是0～5的数字，代表星数，传空默认0颗星
    })
    //点击
    function ScoreInit(e) {
      Score((e == null) ? 0 : e); //传空默认0颗星
      $(".score_wrapper").bind('click', function (e) {
        var eachWidth = $(".score_wrapper").width() / 5; //计算出每个星星的长度
        var X = e.pageX - $(this).offset().left; //距离父容器的偏移距离
        var score = Math.floor(X / eachWidth) + 1; //分数
        Score((getScore() == score) ? 0 : score); //取消评分
      })
    }
    //评分
    function Score(rate) {
      $(".score_wrapper").html("★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate));
    }
    //获取评分
    function getScore() {
      var str = $(".score_wrapper").html(), num = 0;
      for (var i = 0; i < str.length; i++) {
        if (str[i] == "★") {
          num++
        }
      }
      return num;
    }