仿百度文库评分

HTML

<div id="box">
	评价：
	<a href="javascript:;">
		<em></em>
	</a>
	<a href="javascript:;">
		<em></em>
	</a>
	<a href="javascript:;">
		<em></em>
	</a>
	<a href="javascript:;">
		<em></em>
	</a>
	<a href="javascript:;">
		<em></em>
	</a>
	<i>很差</i>
</div>

CSS

*{
	margin: 0;
	padding: 0;
}
#box{
	margin: 50px 0 0 50px;
	line-height: 20px;
}
i{
	font-style: normal;
}
a,em{
	display: inline-block;
}
a{
	width: 33px;
	height: 26px;
	position: relative;
	margin-right: 10px;
}
em{
	width: 0;
    height: 0;
	border-right:20px solid transparent ;
    border-bottom:11px solid #ccc ;
    border-left:20px solid transparent;
    transform: rotate(35deg);
}
.act{
	border-bottom:11px solid orange;
}
.act1{
	border-bottom:11px solid #6A685C;
}
em:after{
	position: absolute;
    left: -19px;
    top: 0;
    width: 0;
    height: 0;
    content: "";
    border-right:20px solid transparent;
    border-bottom:11px solid #ccc;
    border-left:20px solid transparent;
    transform: rotate(-70deg);
}
.act:after{
	border-bottom:11px solid orange;
}
.act1:after{
	border-bottom:11px solid #6A685C;
}
em:before{
	position: absolute;
    left: -13px;
    top: -15px;
    width: 0;
    height: 0;
    content: "";
    border-right:8px solid transparent;
    border-bottom:25px solid #ccc;
    border-left:8px solid transparent;
   	transform: rotate(-35deg);
}
.act:before{
	border-bottom:25px solid orange;
}
.act1:before{
	border-bottom:25px solid #6A685C;
}

JS

	var Box=document.getElementById("box");
	var star=document.getElementsByTagName("a");
	var stars=document.getElementsByTagName("em");
	var oI=document.getElementsByTagName("i")[0];
	var txt=["很差","差","还可以","满意","非常满意"];
	
	for (var i=0;i<star.length;i++) {
		star[i].index=i;
		//鼠标移入
		star[i].onmouseover=function(){
			//根据星星的个数控制星星的颜色，三星一下显示为灰色，三星以上包括三星显示为黄色
			if(this.index<2){
				for (var i=0;i<this.index+1;i++) {
					stars[i].className="act1";
				}
			}else{
				for (var i=0;i<this.index+1;i++) {
					stars[i].className="act";
				}
			}
			oI.innerHTML=txt[this.index];
		}
		//鼠标移出
		star[i].onmouseout=function(){
			for (var i=this.index+1;i<star.length;i++) {
				stars[i].className=" ";
			}
		}
		//鼠标点击给出评价
		star[i].onclick=function(){
			if(this.index<2){
				for (var i=0;i<this.index+1;i++) {
					stars[i].className="act1";
				}
			}else{
				for (var i=0;i<this.index+1;i++) {
					stars[i].className="act";
				}
			}
			//清除所有移入移出事件
			for (var i=0;i<star.length;i++) {
				star[i].onmouseover=null;
				star[i].onmouseout=null;
			}
			oI.innerHTML=txt[this.index];
			Box.onmouseout=null;
			
		}
	}
	//整体移出
	Box.onmouseout=function(){
		for (var i=0;i<star.length;i++) {
			stars[i].className=" ";
		}
		oI.innerHTML=txt[0];
	}