仿淘宝，天猫评分效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>JS评分效果</title>
<style>
*{margin:0;padding:0;}
.pingfen{ width:220px;margin:10px auto;height:28px;}
.pingfen li{ width:27px;float:left;height:28px; cursor:pointer;background:url(http://yinhu.xinnet.tzjdwl.cn/test/score/images/star.gif) no-repeat 0 0; list-style:none;}
.pingfen span{height: 28px;line-height: 28px;float: right;font-size: 18px;}
</style>
</head>

<body>
<div id="pingfen" class="pingfen">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <span class="text"></span>
</div>
<div id="pingfen2" class="pingfen">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <span class="text"></span>
</div>
<div id="pingfen3" class="pingfen">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <span class="text"></span>
</div>
<script>
window.onload=function(){

    function score(id){
        var oPf=document.getElementById(id);
        var aLi=oPf.getElementsByTagName('li');
        var oText=oPf.getElementsByTagName('span')[0];
        var description = ['失望','不满','一般','满意','惊喜',]
        var i=0;
        
        for(i=0;i<aLi.length;i++){
            aLi[i].index=i;
            aLi[i].onmouseover=function(){
                for(i=0;i<aLi.length;i++){
                    if(i<=this.index)
                    {    
                        // console.log(i,this.index);
                        aLi[i].style.backgroundPosition="0 -29px";
                        oText.innerText=(this.index+1)+'分 '+description[i];
                    }
                    else
                    {
                        aLi[i].style.backgroundPosition="0 0";
                    }
                    // if()
                }
            };
            
            aLi[i].onmouseout=function (){
                oText.innerText='';
            };
            aLi[i].onmousedown=function ()
            {
                // alert('提交成功:'+(this.index+1)+'分');
                oText.innerText=(this.index+1)+'分 '+description[this.index];
            };
        }
    }

    score('pingfen');
    score('pingfen2');
    score('pingfen3');
};
</script>
</body>
</html>

优质内容筛选与推荐>>
1、Nginx防盗链
2、centos7系统安装后的基础优化
3、转载css选择器（mark一下以备不时之需）
4、你的知名我的追求
5、马云演讲稿

0 │ 收藏 │ 举报

朋友将在看一看看到

分享想法到看一看