脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JS实现星级评价，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 说明：
本方法采用了jquery库，暂时检测兼容IE8版本。本示例的2种颜色的星星都是放入了一张png图片当中，当然还有其他的一些实现思路。本示例展示的情况是当前页面只有一个星级评价的情况。
思路：
通过对星级显示元素的，mouseenter,mouseout,click 三个事件的监听，从而星星显示的个数。其中我用了2个变量（temp_value,choice_value）来存放当前选定星级的值和当前临时的星级值；
temp_value : 临时的星级值；
choice_value : 选择的星级值；
mouseenter : 鼠标移入，获取当前所在的星星级别赋予temp_value，调整当前星星的图片颜色；
;mouseout : 鼠标移除，通过对比choice_value值，重新调整星星图片颜色；
click : 鼠标单击后，获取当前的星级值，赋值给choice_value;（注意在click前已经进行过mouseenter事件了，click后进行了mouseout事件了）
当完成选定值后，在需要提交评价值的时候，可以通过JS去获取变量choice_value的值；
HTML结构代码：
复制代码
<h1>评价：</h1>
<ul id="star">
<li tITle="很差" id="star1" star="1"></li>
<li title="差" id="star2" star="2"></li>
<li title="一般" id="star3" star="3"></li>
<li title="好" id="star4" star="4"></li>
<li title="很好" id="star5" star="5"></li>
</ul>
复制代码
注：如果页面中不止一个星级评价，也就是出现多行的情况，这个时候只需要对Dom中li的id进行一些改造，加上动态的下标，从而区分不同的元素。另外有个点就是，我把选定的星级值放入的是JS变量中去了，多个评价值的情况下，建议可以在Dom中加上隐藏表单域去存放选定的当前星级值。
JS实现代码：
复制代码
<script src="http://code.jquery.COM/jquery-latest.js"></script>
<script tyPE="text/javascript">
$(document).ready(function() {
VAR _temp_value = 0,//鼠标hover时的等级value
choiceValue = 0;//默认选定的等级值为1
//鼠标移入的时候
$("#star li").mouseenter(function() {
//获取当前的星级
_temp_value = new Number($(this).attr("star"));
showStar();
//鼠标移入的时候
}).mouseout(function(){
hideStar();
//鼠标移入的时候
}).click(function(){
//单击时，设定当前的选定值
choiceValue = _temp_value;
hideSatr();
});
//星级显示
function showStar() {
for (var i = 1 ; i < _temp_value+1; ++i) {
$("#star"+i).addClass("choice");
}
}
function hideStar() {
for (var i = 5 ; i > choiceValue; --i) {
$("#star"+i).removeClass("choice");
}
}
});
</script>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-JS实现星级评价全部内容，希望文章能够帮你解决javascript代码实例教程-JS实现星级评价所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。