今天早上抽空隨手寫了個星級評分的效果,跟大家分享下。由於水平有限,如有問題請指出。 首先要準備一張星星的圖片,灰色是預設狀態,黃色是選擇狀態。如圖: 最後附上程式碼: 複製程式碼 程式碼🎜> javascript星級評分 <BR>*{margin:0;padding:0;} <BR>.wrapper{height:20px;padding:5px;width:130px ;margin:100px auto 10px;} <BR>a{float:left;width:26px;height:20px;background:url(star.png) 0 -20px no-repeat;} <BR>p{fontSun:24px Sim ;width:130px;margin-left:auto;margin-right:auto;} <BR> <BR>window.onload = function(){ <BR>var star = document.getElementsByTagName(' a'); <BR>var oDiv = document.getElementsByTagName('div')[0]; <BR>var temp = 0; <BR>for(var i = 0, len = star.length; i < len; i ){ <BR>star[i].index = i; <BR>star[i].onmouseover = function(){ <BR>clear(); <BR>for(var j = 0; j < this. index 1; j ){ <BR>star[j].style.backgroundPosition = '0 0'; <BR>} <BR>} <BR>star[i].onmouseout = function(){ <BR>for( var j = 0; j < this.index 1; j ){ <BR>star[j].style.backgroundPosition = '0 -20px'; <BR>} <BR>current(temp); <BR>} <BR>star[i].onclick = function(){ <BR>temp = this.index 1; <BR>document.getElementsByTagName('p')[0].innerHTML = temp ' 顆星'; <BR>current (temp); <BR>} <BR>} <BR>//清除所有<BR>function clear(){ <BR>for(var i = 0, len = star.length; i < len; i ){ <BR>star[i].style.backgroundPosition = '0 -20px'; <BR>} <BR>} <BR>//顯示目前第幾顆星<BR>function current(temp){ <BR>for (var i = 0; i < temp; i ){ <BR>star[i].style.backgroundPosition = '0 0'; <BR>} <BR>} <BR>}; <BR> 附上下載地址 PS:這是本人閒著無聊,透過自己所學的javascript 知識,隨意寫的一些效果。