额。。。还是仿淘宝的评价。。。

难得周末了，又有时间做点自己想做的事了，今天搞了个自己的空间，这样演示的demo也好放，不用放下载链接，直接就能看到效果，方便！所以就没时间折腾什么东西，晚上静下来就搞了一个仿淘宝的评价的功能，原型的话网上很多，我也是按照自己的思路做了下，可能跟别人的差不多，我也就是拿来练练手，不荒废掉技能，好了废话不说了，这个功能上的实现思路挺简单的，只要处理好正则表达式的匹配基本就OK了，放上源码:

css：

<style>
<!--
    body, ul, li, p{ margin:0; padding:0;}
    body{ font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#666;}
    ul{ list-style-type:none;}
    #star span,#star ul{ float:left; height:19px; line-height:19px;}
    #star ul{ margin:0 10px;}
    #star ul li{ text-indent:-9999px; float:left; width:20px; background:url("http://h88688788.web-127.com/img/star_v2.png") 0 -2px no-repeat; cursor:pointer;}
    #star ul li.on{ background-position:0 -30px;}
    #star ul li.on_1{ background-position:0 -118px;}
    #star p{ position:absolute; top:20px; left:0; width:160px; height:60px; border:1px solid #999; padding:7px 10px 0; display:none;}
    #star p em{ display:block; color:#f60; font-style:normal;}
    #star strong{ color:#f60; }
-->
</style>

js：

<script>
<!--
    //显示星星个数
    var showStar=function(){
        this.Score=0;
        this.Msg=[ 
                    "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",        
                    "不满意|部分有破损，与卖家描述的不符，不满意",                
                    "一般|质量一般，没有卖家描述的那么好",                
                    "满意|质量不错，与卖家描述的基本一致，还是挺满意的",                
                    "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
        ]
    };
    showStar.prototype={
        show:function(element,num)
        {
            var starNum=num==null?this.Score:num;
            for(var i=0;i<element.length;i++)
            {
                //这样写我觉得更清楚点
                if(starNum<=2){
                    element[i].className=i<starNum ? "on_1":"";
                }
                else{
                    element[i].className=i<starNum ? "on":"";
                }
                    
            }
        }
    }
    window.onload=function(){
        var starbox=document.getElementById("star");
        var star=starbox.getElementsByTagName("li");
        var span=starbox.getElementsByTagName("span")[1];
        var p=starbox.getElementsByTagName("p")[0];
        var newstar=new showStar();
        for(var i=0;i<star.length;i++)
        {
            star[i].index=i+1;
            star[i].onmouseover=function(){
                newstar.show(star,this.index);
                p.innerHTML="<em><strong>"+this.index+"</strong>分 "+newstar.Msg[this.index-1].match(/(.+)\|/)[1]+"</em>"+newstar.Msg[this.index-1].match(/\|(.+)/)[1];
                p.style.left=starbox.offsetLeft+this.offsetWidth*this.index+56+"px";
                p.style.display="block";
            }
            star[i].onmouseout=function(){
                newstar.show(star);
                p.style.display="none";
            }
            star[i].onclick=function(){
                newstar.Score=this.index;
                span.innerHTML="<strong>"+newstar.Score+"分</strong>("+newstar.Msg[newstar.Score-1].match(/\|(.+)/)[1]+")";
                p.style.display="none";
            }
        }
        
    }
-->
</script>

xhtml:

<div id="star">
    <span>小提示：点击星星就能打分</span>
    <ul>
        <li><a href="javascript:void();">1</a></li>
        <li><a href="javascript:void();">2</a></li>
        <li><a href="javascript:void();">3</a></li>
        <li><a href="javascript:void();">4</a></li>
        <li><a href="javascript:void();">5</a></li>
    </ul>
    <span></span>
    <p></p>
</div>

demo文件地址：

https://files.cnblogs.com/wyflogo/star.zip