Maison >interface Web >js tutoriel >JS implémente le classement par étoiles
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>
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!