今天来实现下星级评分，后边并跟有评价文字。
html代码如下：
<span class="star"> ???????<b class="ct-star ?ic-star-off"></b> ???????<b class="ct-star ?ic-star-off"></b> ???????<b class="ct-star ?ic-star-off"></b> ???????<b class="ct-star ?ic-star-off"></b> ???????<b class="ct-star ?ic-star-off"></b></span><span class="star-txt"></span>
css如下：
.ct-star { ???????display: inline-block; ???????margin: 0 1px; ???????width: 19px; ???????height: 19px; ???????background: url(img/stars.png) no-repeat; ???????vertical-align: -2px; ???????cursor: pointer; ???} .ic-star-off { ???????background-position: -39px 0; ???}js如下：
<script> ???window.onload=function(){ ???????var aSpan=document.getElementsByClassName("star")[0]; ???????var aStxt=document.getElementsByClassName("star-txt")[0]; ???????var aBstar=aSpan.getElementsByTagName("b"); ???????var arrBtxt=["很差","较差","还行","推荐","力荐"]; ???????var num=0; ???????var onOff=true;for(var i= 0;i<aBstar.length;i++){ ???????????????aBstar[i].index=i; ???????????????//鼠标移入 ???????????????aBstar[i].onmouseover=function(){ ???????????????????if(onOff) { ???????????????????????num = this.index; ???????????????????????aStxt.innerHTML = arrBtxt[num]; ???????????????????????for (var i = 0; i <=this.index; i++) { ???????????????????????????aBstar[i].style.backgroundPosition = "0 0"; ???????????????????????} ???????????????????} ???????????????}; ???????????????//鼠标移开 ???????????????aBstar[i].onmouseout=function(){ ????????????????if(onOff){//设定个开关，等开关为真就执行鼠标移除的代码 ????????????????????aStxt.innerHTML=""; ????????????????????for(var i=0;i<=this.index;i++){ ????????????????????????aBstar[i].style.backgroundPosition="-39px 0"; ????????????????????} ??????????????????} ????????????????}; ???????????????//鼠标点击 ???????????????aBstar[i].onclick=function(){ ???????????????????onOff=false;//开关为假就不执行鼠标移除的代码 ???????????????????//先清空 ???????????????????aStxt.innerHTML=""; ???????????????????for(var i=0;i<aBstar.length;i++){ ???????????????????????aBstar[i].style.backgroundPosition="-39px 0"; ???????????????????} ???????????????????//点击当前星星，之前的都点亮包含自己 ???????????????????num = this.index ; ???????????????????aStxt.innerHTML=arrBtxt[num]; ???????????????????for(var i=0;i<=this.index;i++){ ???????????????????????aBstar[i].style.backgroundPosition="0 0"; ???????????????????} ???????????????}; ???????????} ???}</script>代码运行效果如下：
原生js实现星级评分
原文地址：http://www.cnblogs.com/web001/p/8035325.html