天丫头的gravatar头像
天丫头 2014-04-25 22:08:36

原生js实现的星级评分效果

写个最简单的原生js的星级评分

Html代码

<div id="rank" class="pingfen">  
    <ul>  
        <li></li>  
        <li></li>  
        <li></li>  
        <li></li>  
        <li></li>  
    </ul>  
    <p>加载中</p>  
</div>  


Css代码

<style type="text/css">     
 *{margin: 0;padding: 0;}     
 .pingfen{ width: 135px; margin:10px auto; height:20px; position: relative;}     
 .pingfen ul{height:20px; margin-bottom: 10px;}     
 .pingfen li{ width: 20px; float: left; height: 20px; cursor: pointer; background:    url(star.png) no-repeat 0 0; list-style: none;}    
  .pingfen .active{background: url(star.png) no-repeat 0 -28px;}   
   .pingfen p{ position: absolute; top:24px; left: 0px; width: 134px; height: 28px;                  
   background: #fff; line-height: 28px; text-align: center; border:1px solid #333;           
    display:none;}  </style>  
JS代码:
<script>

var aData =["很差","较差","一般","推荐","力推"];  
  
window.onload=function(){  
    var oDiv = document.getElementById("rank");  
    var aLi = oDiv.getElementsByTagName("li");  
    var oP = oDiv.getElementsByTagName("p")[0];  
    var i =0;  
    for(i=0;i<aLi.length;i++){  
        aLi[i].index = i;  
            aLi[i].onmouseover = function(){  
            oP.style.display = "block";  
            oP.innerHTML=aData[this.index];  
            for(i=0; i<=this.index;i++){  
                aLi[i].className="active";  
            }  
        };  
        aLi[i].onmouseout = function(){  
            oP.style.display = "";  
            for(i=0; i<aLi.length; i++){  
                aLi[i].className="";  
            }  
        };  
        aLi[i].onclick=function(){  
            alert(this.index +1);  
        };  
    }  
  
};  
</script>  

 

运行截图:

原生js实现的星级评分效果

转载:http://xiaomiya.iteye.com/blog/2035333


最代码官方编辑于2016-5-31 9:32:34


打赏

文件名:score_js.zip,文件大小:23.58K 下载
  • /
      • /score_js
        • /score_js/sample.jpg
        • /score_js/score.html
        • /score_js/star.jpg
最代码最近下载分享源代码列表最近下载
abcdljw  LV16 2021年12月28日
rain2019  LV2 2019年2月26日
tony138  LV1 2018年9月5日
xsl258258  LV1 2018年8月29日
bianyuning  LV14 2018年5月2日
小透明  LV1 2018年5月1日
gq1111111  LV1 2018年1月21日
taozero2008  LV3 2017年11月7日
板bbbbbb  LV1 2017年8月19日
biao734436664  LV2 2017年5月30日
最代码最近浏览分享源代码列表最近浏览
wonderUU  LV2 4月20日
abcdljw  LV16 2021年12月28日
GitHub121  LV11 2021年10月30日
litemg  LV8 2020年6月24日
jpy8500  LV6 2020年5月23日
1samare 2019年12月25日
暂无贡献等级
luulala  LV1 2019年9月26日
joyyyyy 2019年9月3日
暂无贡献等级
最代码安逸  LV15 2019年5月12日
zhandme  LV4 2019年3月6日
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友