最代码广告位
天丫头的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
最代码最近下载分享源代码列表最近下载
rain2019 LV22019年2月26日
星星星星
tony138 LV12018年9月5日
星星
xsl258258 LV12018年8月29日
星星
bianyuning LV142018年5月2日
月亮月亮月亮星星星星
小透明 LV12018年5月1日
星星
gq1111111 LV12018年1月21日
星星
taozero2008 LV32017年11月7日
星星星星星星
板bbbbbb LV12017年8月19日
星星
biao734436664 LV22017年5月30日
星星星星
zyl LV342017年5月20日
太阳太阳星星星星
最代码最近浏览分享源代码列表最近浏览
1samare2019年12月25日
暂无贡献等级
luulala LV12019年9月26日
星星
joyyyyy2019年9月3日
暂无贡献等级
最代码安逸 LV132019年5月12日
月亮月亮月亮星星
zhandme LV42019年3月6日
月亮
rain2019 LV22019年2月26日
星星星星
小伙儿搞IT LV222018年12月25日
太阳月亮星星星星
jlthjashc LV22018年12月18日
星星星星
tony138 LV12018年9月5日
星星
xsl258258 LV12018年8月29日
星星
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友