JS implémente le classement par étoiles-js tutoriel-php.cn

JS implémente le classement par étoiles

php中世界最好的语言

Libérer： 2018-04-19 09:20:50

original

2980 Les gens l'ont consulté

Cette fois, je vais vous proposer JS pour implémenter le classement par étoiles. Quelles sont les précautions pour que JS implémente le classement par étoiles. Voici des cas pratiques, jetons un coup d'œil.

Même si c'est simple, il y a quand même quelques points auxquels il faut faire attention :

1. L'effet de survol lorsque vous ne cliquez pas, les étoiles s'allumeront lorsque la souris se déplace.

2. Cliquez pour désactiver l'effet de survol.

3. Cliquez sur la même étoile et l'étoile peut changer de couleur à tout moment.

Affichage du code spécifique :

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

Copier après la connexion

Je pense que vous maîtrisez la méthode de lecture de cet article. Pour plus de passionnant, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!