JS模擬百度文庫評分

CSS部分：

body,h3{margin:0; padding:0;}
	#grade{width:500px; margin:100px auto;}
	#grade span{float:left; color:#ff0808; margin-top:9px;}
	#grade h3{float:left; height:22px; line-height:22px; font-size:16px; margin-top:9px;}
	#stars{float:left;}
	#stars a{float:left; width:22px; height:22px; background:url(star.png) 0 -22px; margin-top:9px;}
	#notice{float:left; width:240px; padding-left:4px; color:#ef7300; font-size:14px; font-weight:bold; line-height:40px;}
	#notice img{width:240px; height:40px; border:none; vertical-align:top;}
	#notice span{display:none; margin-top:2px;color:#ef7300;}

HTML部分：

<div id="grade">
	<span>*</span>
    <h3>總體評價：</h3>
    <div id="stars">
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
    </div>
    <div id="notice">
    	<span></span>
    	<img src="notice.png" />
    </div>
</div>

JS部分：

window.onload = function(){
		var oDivStars = document.getElementById('stars');
		var aA = oDivStars.getElementsByTagName('a');
		var oDivNotice = document.getElementById('notice');
		var oSpan = oDivNotice.getElementsByTagName('span')[0];
		var oImg = oDivNotice.getElementsByTagName('img')[0];
		var arrText = ['很差','較差','還行','推薦','力薦'];
		var onOff = false;
		var num = 0;

		// 鼠標經過，顯示文字，同時隱藏圖片提示
		oDivStars.onmouseover = function(){
			if(!onOff){
				oSpan.style.display = 'block';
				oImg.style.display = 'none';
			}
		};

		// 鼠標移開，隱藏文字，同時顯示圖片提示
		oDivStars.onmouseout = function(){
			if(!onOff){
				oSpan.style.display = 'none';
				oImg.style.display = 'block';
			}
		};

		// 循環遍歷所有的a，執行相應事件
		for (var i = 0; i < aA.length; i++) {
			aA[i].index = i;
			// 鼠標經過a
			aA[i].onmouseover = function(){
				grade(this.index, true);
			};
			// 鼠標移開a
			aA[i].onmouseout = function(){
				grade(num ,onOff);
			};
			// 鼠標點擊a
			aA[i].onclick = function(){
				onOff = true;
				num = this.index;
				grade(num,onOff);
			};
		}

		// 評分函數
		function grade(num , onOff){
			for (var i = 0; i < aA.length; i++) {
				aA[i].style.backgroundPosition = '0 -22px';
			};
			if(onOff){
				for(var i = 0; i<= num; i++){
					if(i<2){
						aA[i].style.backgroundPosition = '0 -44px';
					}else{
						aA[i].style.backgroundPosition = '0 0';
					}
				}
			}
			oSpan.innerHTML = arrText[num];
		}
	};

預覽效果：