码迷,mamicode.com
首页 > Web开发 > 详细

原生js实现星级评分

时间:2017-12-14 03:20:49      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:nbsp   innerhtml   margin   ica   css   line   idt   play   ali   

今天来实现下星级评分,后边并跟有评价文字。

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实现星级评分

标签:nbsp   innerhtml   margin   ica   css   line   idt   play   ali   

原文地址:http://www.cnblogs.com/web001/p/8035325.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!