今天上午抽空随手写了个星级评分的效果,给大家分享下。由于水平有限,如有问题请指出。 首先要准备一张星星的图片,灰色是默认状态,黄色是选择状态。如图: 最后附上代码: 复制代码 代码如下: 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{font:24px SimSun;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 知识,随意写的一些效果。