Rumah >hujung hadapan web >tutorial js >JS实现评价星级
这次给大家带来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中文网其它相关文章!
推荐阅读:
Atas ialah kandungan terperinci JS实现评价星级. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!