美文网首页
JS实现星级评分

JS实现星级评分

作者: 请叫我果爸 | 来源:发表于2018-08-15 16:08 被阅读0次

    朋友给我一份星级评价的html代码,说不能实现多行星级评价,让我帮忙看一下。

    帮朋友修改的,怕到时候自己也用到了,先把代码贴这里。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>星级评分系统</title>
    <style> 
    body,div,ul,li,p{margin:0;padding:0;}
    body{color:#666;font:12px/1.5 Arial;}
    ul{list-style-type:none;}
    .star{position:relative;width:600px;margin:10px auto;}
    .star ul,.star span{float:left;display:inline;height:19px;line-height:19px;}
    .star ul{margin:0 10px;}
    .star li{float:left;width:24px;cursor:pointer;text-indent:-9999px;background:url(star.png) no-repeat;}
    .star strong{color:#f60;padding-left:10px;}
    .star li.on{background-position:0 -28px;}
    </style>
    <script type="text/javascript"> 
    function neo(id){ //这里id
        var oStar = document.getElementById(id);
        var aLi = oStar.getElementsByTagName("li");
        var oUl = oStar.getElementsByTagName("ul")[0];
        var oP = oStar.getElementsByTagName("p")[0];
        var i = iScore = iStar = 0;
        
        for (i = 1; i <= aLi.length; i++){
            aLi[i - 1].index = i;
            //点击后进行评分处理
            aLi[i - 1].onclick = function (){
                fnPoint(this.index);
                //计算浮动层位置
                oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 104 + "px";
                //匹配浮动层文字内容
                oP.innerHTML = "<b>" + this.index + "</b> 分";
            }
        }
        
        //评分处理
        function fnPoint(iArg){
            //分数赋值
            iScore = iArg || iStar;
            for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : ""; 
        }
        
    };
    </script>
    </head>
    <body>
    <div id="wuliu" class="star" onmouseover="neo('wuliu')">
            <span>物流速度</span>
            <ul>
                <li><a href="javascript:;">1</a></li>
                <li><a href="javascript:;">2</a></li>
                <li><a href="javascript:;">3</a></li>
                <li><a href="javascript:;">4</a></li>
                <li><a href="javascript:;">5</a></li>
            </ul>
            <p></p>
    </div>
    <div id="fuwu" class="star" onmouseover="neo('fuwu')">
            <span>服务态度</span>
            <ul>
                <li><a href="javascript:;">1</a></li>
                <li><a href="javascript:;">2</a></li>
                <li><a href="javascript:;">3</a></li>
                <li><a href="javascript:;">4</a></li>
                <li><a href="javascript:;">5</a></li>
            </ul>
            <p></p>
    </div>
    <div id="fahuo" class="star" onmouseover="neo('fahuo')">
            <span>发货速度</span>
            <ul>
                <li><a href="javascript:;">1</a></li>
                <li><a href="javascript:;">2</a></li>
                <li><a href="javascript:;">3</a></li>
                <li><a href="javascript:;">4</a></li>
                <li><a href="javascript:;">5</a></li>
            </ul>
            <p></p>
    </div>
    </body>
    </html>
    

    其实用的就是网上的一些办法,然后稍微修改了下。仅供参考。
    实现效果:


    相关文章

      网友评论

          本文标题:JS实现星级评分

          本文链接:https://www.haomeiwen.com/subject/nxywbftx.html