javaScript 星级评价效果

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_41617704/article/details/79052790

使用input hidden实现

以后尽量多谢注释以便理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>星级评价</title>
    <style>
        .spj:after{ content: '';display: block;clear: both;height: 0;visibility: hidden;}
        .clearfix{ zoom: 1;}
        .spj ul li,.spj ul{ float:left; padding: 0; margin: 0;}
        .spj ul li{ list-style: none; font-size: 26px; color:#999; padding:0 5px; cursor: pointer;user-select: none; font-weight:bold;}
        .spj ul li.col{ color: #ee0;}
        .spj span{ line-height:  30px; margin-left: 15px;}
    </style>

</head>
<body>
    <input type="hidden" value="3" title="10">
    <input type="hidden" value="">
    <script>
        var input=document.querySelectorAll('input[type="hidden"]');
        input.forEach(function(_input){
            var _inputTitle=_input.getAttribute('title')|| 5;
            var div=document.createElement('div');
            //清除浮动
            div.className='spj clearfix';
            _input.parentNode.insertBefore(div,_input);
            var ul=document.createElement('ul');
            div.appendChild(ul);
            var number= ["零","一","二","三","四","五","六","七","八","九","十"];
            //动态添加五角星
            for (var i =1; i <=_inputTitle; i++){
                var li=document.createElement('li');
                ul.appendChild(li);
                li.innerHTML='★';
                li.title=number[i]+'星好评';
            }
            var span=document.createElement('span');
            div.appendChild(span);
            var LI=ul.querySelectorAll('li');
            //默认有value改变颜色
            for (var j = 0; j <= _input.value; j++) {
                //当前一个都没有被点击时不用循环
                if(_input.value=="")break;
                LI[j].className = 'col';
            }
            span.innerHTML=_input.value?""+number[_input.value]+"星好评":"";
            LI.forEach(function(_li,a){
                _li.onclick=function(){
                    span.innerHTML=_li.title;
                    //当前点击选中的星的下标
                    _input.value=a;
                }
                _li.onmouseover=function(){
                    //清除选中的星的颜色
                    for (var i = 0; i < LI.length; i++) {
                        LI[i].className = '';
                    }
                    //当前移上的星和他前面的都变颜色
                    for (var j= 0; j <= a; j++ ){
                        LI[j].className='col';
                    }
                }
                _li.onmouseout=function(){
                    //清除没有点击选中的
                    for (var i = 0; i < LI.length; i++) {
                        LI[i].className = '';
                    }
                    //鼠标移开后变回选中的星
                    for (var j = 0; j <= _input.value; j++) {
                        //当前一个都没有被点击时不用循环
                        if(_input.value=="")break;
                        LI[j].className = 'col';
                    }
                }
            })
        })
    </script>
</body>

<html>

清除li 的类时原本想写一个方法反复调用的,结果发现只有最后一组有效,其他的都清除不了(猜测可能是foreach里面方法名一样的话,后面的会覆盖了前面的方法),暂时没想到解决办法;

阅读更多
换一批

没有更多推荐了,返回首页