五星评分效果 原生js
五星评分在很多地方都可以用到,网上也有插件或者相应的代码,在这里我给大家提供一款我自己写的超级简单实用的五星评分代码,连图片都不需要
<!-- 评分start --> <ul> <li class="start_li3"><span class="grade">评分:</span> <label><input name="j_class" type="radio" class="disNo" value="1"><span class="start s3" onclick="start('s3',this)">★</span></label> <label><input name="j_class" type="radio" class="disNo" value="2"><span class="start s3" onclick="start('s3',this)">★</span></label> <label><input name="j_class" type="radio" class="disNo" value="3"><span class="start s3" onclick="start('s3',this)">★</span></label> <label><input name="j_class" type="radio" class="disNo" value="4"><span class="start s3" onclick="start('s3',this)">★</span></label> <label><input name="j_class" type="radio" class="disNo" value="5"><span class="start s3" onclick="start('s3',this)">★</span></label> </li> </ul> <style type="text/css"> *{margin: 0;padding: 0;} ul,li{list-style: none;} .start_li3{ -moz-user-select: -moz-none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .disNo{display: none;} .start{ cursor: pointer; font-family: "微软雅黑"; font-size: 18px;color: #999; } </style> <script type="text/javascript"> function start(ele,that){ var starts = $('.'+ele); var x = $(starts).index(that) starts.css("color","#999"); for(var i =0 ;i<=x;i++){ starts.eq(i).css("color","#ff9800") } } </script> <!--评分end-->
可以复制到页面看看效果,如果有多个评分,js一个就够了,在传人参数时只要保证第一个参数传人的不同就可以了,相信你会喜欢的