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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_35607510/article/details/79396872
"★★★★★☆☆☆☆☆".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

主要代码

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;
    }


阅读更多
换一批

没有更多推荐了,返回首页