原生js实现的星级评分效果

心已赠人 2022-08-22 14:25 207阅读 0赞

原文：[原生js实现的星级评分效果][js]

源代码下载地址：[http://www.zuidaima.com/share/1795685450615808.htm][js]

写个最简单的原生js的星级评分

Html代码

Css代码

JS代码：
    <script>
    
    var aData =["很差","较差","一般","推荐","力推"];  
      
    window.οnlοad=function(){  
        var oDiv = document.getElementById("rank");  
        var aLi = oDiv.getElementsByTagName("li");  
        var oP = oDiv.getElementsByTagName("p")[0];  
        var i =0;  
        for(i=0;i<aLi.length;i++){  
            aLi[i].index = i;  
                aLi[i].onmouseover = function(){  
                oP.style.display = "block";  
                oP.innerHTML=aData[this.index];  
                for(i=0; i<=this.index;i++){  
                    aLi[i].className="active";  
                }  
            };  
            aLi[i].onmouseout = function(){  
                oP.style.display = "";  
                for(i=0; i<aLi.length; i++){  
                    aLi[i].className="";  
                }  
            };  
            aLi[i].οnclick=function(){  
                alert(this.index +1);  
            };  
        }  
      
    };  
    </script>

运行截图：

![20140425224400006.jpg][]

转载：[http://xiaomiya.iteye.com/blog/2035333][http_xiaomiya.iteye.com_blog_2035333]

[js]: http://www.zuidaima.com/share/1795685450615808.htm
[20140425224400006.jpg]: http://static.zuidaima.com/images/12340/201404/20140425224400006.jpg
[http_xiaomiya.iteye.com_blog_2035333]: http://xiaomiya.iteye.com/blog/2035333