五星评价代码,不多说了,直接上代码,第一次上传心情忐忑啊 …
<!doctype html>
<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.length; i++){
aA[i].innerHTML="☆";
aA[i].index=i;
//浮到星星上时变颜色
aA[i].onmouseover=function(){
for(var j=0; j<aA.length; j++){
if(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; j<aA.length; j++) {
if(num){
if(j<num){
aA[j].className="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; j<aA.length; j++){
if(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>