javascript 星级评分效果(手写)

今天上午抽空随手写了个星级评分的效果，给大家分享下。由于水平有限，如有问题请指出。首先要准备一张星星的图片，灰色是默认状态，黄色是选择状态。如图：最后附上代码：复制代码代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>javascript星级评分</title> <style type="text/css"> *{margin:0;padding:0;} .wrapper{height:20px;padding:5px;width:130px;margin:100px auto 10px;} a{float:left;width:26px;height:20px;background:url(star.png) 0 -20px no-repeat;} p{font:24px SimSun;width:130px;margin-left:auto;margin-right:auto;} </style> </head> <body> <div class="wrapper"> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> <p></p> </body> </html> <script type="text/javascript"> window.onload = function(){ var star = document.getElementsByTagName('a'); var oDiv = document.getElementsByTagName('div')[0]; var temp = 0; for(var i = 0, len = star.length; i < len; i++){ star[i].index = i; star[i].onmouseover = function(){ clear(); for(var j = 0; j < this.index + 1; j++){ star[j].style.backgroundPosition = '0 0'; } } star[i].onmouseout = function(){ for(var j = 0; j < this.index + 1; j++){ star[j].style.backgroundPosition = '0 -20px'; } current(temp); } star[i].onclick = function(){ temp = this.index + 1; document.getElementsByTagName('p')[0].innerHTML = temp + ' 颗星'; current(temp); } } //清除所有 function clear(){ for(var i = 0, len = star.length; i < len; i++){ star[i].style.backgroundPosition = '0 -20px'; } } //显示当前第几颗星 function current(temp){ for(var i = 0; i < temp; i++){ star[i].style.backgroundPosition = '0 0'; } } }; </script> 附上下载地址 PS：这是本人闲着无聊，通过自己所学的 javascript 知识，随意写的一些效果。

　　推荐阅读

　　JavaScript与DOM组合动态创建表格实例

简介　　这篇文章简单介绍了DOM 1.0一些基本而强大的方法以及如何在JavaScript中使用它们。你可以学到如何动态地创建、获取、控制和删除HTML元素。这些DOM方法同样适用于XML。所有全面支持DOM 1.0的浏览器都能很好>>>详细阅读

本文标题：javascript 星级评分效果(手写)

地址：http://www.17bianji.com/kaifa2/JS/22726.html

1/2 1