星级评价

我用的是背景图片的星星，通过改变背景定位的位置，改变星星的样式

html结构代码：

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
           

css样式代码：

<style type="text/css">
		body,ul,li{
			padding: 0;
			margin: 0;
		}
		li{
			list-style: none;
			float: left;
			width: 27px;
			height: 28px;
			background: url(img/star.gif) no-repeat 0 0;
		}
		</style>
           

js的实现代码：

<script type="text/javascript">
		var aLi = document.getElementsByTagName('li');
		var flag = false;
		var index = 0; //表示点击了哪个星星
		
		//给每个星星鼠标进入和离开事件
		for(let i = 0; i < aLi.length; i++){
			aLi[i].onmouseover = function(){
			//让所有的回到原始状态
				for(var j = 0; j < aLi.length; j++){
					//用的是背景图，改变定位信息即可
					aLi[j].style.backgroundPosition = "0 0";
				}
				//让鼠标之前的点亮
				for(var j = 0; j <= i; j++){
					aLi[j].style.backgroundPosition = "0 -28px";
				}
			}
			aLi[i].onmouseout = function(){
				for(var j = 0; j < aLi.length; j++){
					aLi[j].style.backgroundPosition = "0 0";
				}
				//判断是否被点击
				if(flag){
					for(var j = 0; j <= index; j++){
						aLi[j].style.backgroundPosition = "0 -28px";
					}
				}
				
//添加点击事件
			aLi[i].onclick = function(){
				flag = true; 
				index = i;  //保存点击的索引值
			}
		}
		</script>