Home > Article > Web Front-end > JS implements star rating

JS implements star rating

php中世界最好的语言Original: 2018-04-19 09:20:502947browse

This time I will bring you JS to implement star rating. What are the precautions for JS to implement star rating? The following is a practical case, let’s take a look.

Although it is simple, there are still a few things to pay attention to:

1. The hover effect when not clicked, the stars will light up as the mouse moves.

2. Click to turn off the hover effect.

3. Click on the same star and the star can change colors at any time.

Specific code display:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
  </head>
  <style type="text/css">
    .stars{
      white-space: nowrap;
      text-align: center;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .stars li{
      display: inline-block;
      color:#ADADAD;
      font-size: 40px;
    }
  </style>
  <body>
    <ul class="stars">
      <li>★</li>
      <li>★</li>
      <li>★</li>
      <li>★</li>
      <li>★</li>
    </ul>
    <script src="../../js/common/jquery-git.js"></script>
    <script>
    $(function() {
        //为星星设置hover效果
        varisClicked =false;
        varbeforeClickedIndex = -1;
        varclickNum = 0;//点击同一颗星次数
        $('li').hover(
          function() {
            if(!isClicked) {
              $(this).css('color','#F0AD4E');
              varindex = $(this).index();
              for(vari = 0; i <= index; i++) {
                $('li:nth-child('+ i +')').css('color','#F0AD4E');
              }
            }
          },
          function() {
            if(!isClicked) {
              $('li').css('color','#ADADAD');
            }
          }
        );
        //星星点击事件
        $('li').click(function() {
          $('li').css('color','#ADADAD');
          isClicked =true;
          varindex = $(this).index();
          for(vari = 1; i <= index+1; i++) {
            $('li:nth-child('+ i +')').css('color','#F0AD4E');
          }
          if(index == beforeClickedIndex) {//两次点击同一颗星星 该星星颜色变化
            clickNum++;
            if(clickNum % 2 == 1) {
              $('li:nth-child('+ (index + 1) +')').css('color','#ADADAD');
            }else{
              $('li:nth-child('+ (index + 1) +')').css('color','#F0AD4E');
            }
          }else{
            clickNum = 0;
            beforeClickedIndex = index;
          }
        });
      });
    </script>
  </body>
</html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

JS implements star rating

Related articles