星級評價

我用的是背景圖檔的星星，通過改變背景定位的位置，改變星星的樣式

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>