星级评价

星级评价载入了 animate.css ，用于实现动画效果。需要先引入CSS文件：

<link rel="stylesheet" type="text/css" href="lib/animate/animate.css"/>

IMG示例代码

<style>
  .star-warp{width: 100%; height: 40px; margin: 20px 0; padding: 0 25px; box-sizing: border-box; font-size: 0; display: flex; justify-content: space-around;}
  .star-item{width: 30px; height: 100%; text-align: center; display: inline-block;}
  .star-item img{width: 100%;}
</style>
<div class="aui-content" style="padding: 15px 15px 0 15px;">
  <div class="star-warp">
    <span class="star-item" onclick="starClick(0)"><img src="star_active.png" alt="" /></span>
    <span class="star-item" onclick="starClick(1)"><img src="star_active.png" alt="" /></span>
    <span class="star-item" onclick="starClick(2)"><img src="star_active.png" alt="" /></span>
    <span class="star-item" onclick="starClick(3)"><img src="star_active.png" alt="" /></span>
    <span class="star-item" onclick="starClick(4)"><img src="star_active.png" alt="" /></span>
  </div>
  <div class="textarea-warp border">
    <textarea id="textarea" name="text" rows="" cols="" placeholder="我们的服务您还满意么？留下评价让我们做的更好吧"></textarea>
  </div>
  <div class="btn aui-btn" onclick="submitFn()">发布</div>
</div>
<script>
  //星级评价
  function starClick(i){
    var index = i + 1;
    $('.star-item').attr({src: 'star.png'});
    for(var i = 0; i < index; i++) {
      $('.star-item').eq(i).attr({src: 'star_active.png'});
      $('.star-item').eq(i).addClass("bounceIn animated infinite");
    }
    var _timer = setTimeout(function(){
      $('.star-item').removeClass("bounceIn animated infinite");
      clearTimeout(_timer);
    },500);
  }
  //发布
  function submitFn() {
      alert('发布');
  },
</script>

IconFont示例代码

<style>
  .star-warp{width: 100%; height: 40px; margin: 20px 0; padding: 0 25px; box-sizing: border-box; font-size: 0; display: flex; justify-content: space-around;}
  .star-item{width: 30px; height: 100%; text-align: center; display: inline-block;}
  .star-item i{font-size: 30px; color: #CDCDCD;}
  .star-item i.active{color: #FEC513;}
</style>
<div class="aui-content"  style="padding: 15px 15px 0 15px;">
  <div class="star-warp">
    <span class="star-item" onclick="starClick(0)"><i class="iconfont iconxing"></i></span>
    <span class="star-item" onclick="starClick(1)"><i class="iconfont iconxing"></i></span>
    <span class="star-item" onclick="starClick(2)"><i class="iconfont iconxing"></i></span>
    <span class="star-item" onclick="starClick(3)"><i class="iconfont iconxing"></i></span>
    <span class="star-item" onclick="starClick(4)"><i class="iconfont iconxing"></i></span>
  </div>
  <div class="textarea-warp border">
    <textarea id="textarea" name="text" rows="" cols="" placeholder="我们的服务您还满意么？留下评价让我们做的更好吧"></textarea>
  </div>
  <div class="btn aui-btn" onclick="submitFn()">发布</div>
</div>
<script>
  //星级评价
  function starClick(i){
    var index = i + 1;
    $('.star-item i').removeClass('active');
    for(var i = 0; i < index; i++) {
      $('.star-item').eq(i).find('i').addClass('active');
      $('.star-item').eq(i).addClass("bounceIn animated infinite");
    }
    var _timer = setTimeout(function(){
      $('.star-item').removeClass("bounceIn animated infinite");
      clearTimeout(_timer);
    },500);
  }
  //发布
  function submitFn() {
      alert('发布');
  },
</script>