原生js五星评价

五星评价代码,不多说了,直接上代码,第一次上传心情忐忑啊 …


<html>
<head>
<meta charset="utf-8">
<title>五星评价title>
<style>
    *{margin:0;padding:0;}
    a{display: inline-block;padding:20px;font-size: 30px;cursor: pointer;}
    .colorComment{color:red;}
style>
<script>
window.onload=function(){
    function commentFiv(id,tab) {
        var oComment=document.getElementById(id);
        var aA=oComment.getElementsByTagName(tab);
        var num=0;
        for(var i=0;i"☆";
            aA[i].index=i;
            //浮到星星上时变颜色
            aA[i].onmouseover=function(){
                for(var j=0; jif(j<this.index+1){
                        aA[j].className="colorComment";
                        aA[j].innerHTML="★";
                    }
                    else{
                        aA[j].className="";
                        aA[j].innerHTML="☆";
                    }
                }
            };
            //浮出星星上时回到初始状态
            aA[i].onmouseout=function(){
                for(var j=0; jif(num){
                        if(j"colorComment";
                            aA[j].innerHTML="★";
                        }
                        else{
                            aA[j].className="";
                            aA[j].innerHTML="☆";
                        }
                    }else{
                        aA[j].className="";
                        aA[j].innerHTML="☆";
                    }
                }
            };
            //点击确定
            aA[i].onclick=function () {
                for(var j=0; jif(j<this.index+1){
                        aA[j].className="colorComment";
                        aA[j].innerHTML="★";
                    }
                    else{
                        aA[j].className="";
                        aA[j].innerHTML="☆"
                    }
                }
                num = this.index+1
            }
        }
    }
    commentFiv("box","a")

};
script>
head>

<body>
<div id="box">
    <a>a><a>a><a>a><a>a><a>a>
div>
body>
html>

你可能感兴趣的:(javascript)