JS实现评价星级-js教程-PHP中文网

JS实现评价星级

php中世界最好的语言

发布： 2018-04-19 09:20:50

原创

3210人浏览过

这次给大家带来JS实现评价星级，JS实现评价星级的注意事项有哪些，下面就是实战案例，一起来看一下。

虽然简单，还是有几个注意的地方：

1. 未点击时的hover效果，星星会随鼠标移动亮起来喔。

2. 点击后关闭hover效果。

3. 点击同一颗星星，星星可以随时换色。

具体代码展示：

<!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>

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！