今天来实现下星级评分,后边并跟有评价文字。
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].οnmοuseοver=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].οnmοuseοut=function(){ if(onOff){//设定个开关,等开关为真就执行鼠标移除的代码 aStxt.innerHTML=""; for(var i=0;i<=this.index;i++){ aBstar[i].style.backgroundPosition="-39px 0"; } } }; //鼠标点击 aBstar[i].οnclick=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>
代码运行效果如下: