【javascript】javascript 星级评分
<div id="cnblogs_post_body">今天上午抽空随手写了个星级评分的效果，给大家分享下。由于水平有限，如有问题请指出。首先要准备一张星星的图片，灰色是默认状态，黄色是选择状态。如图：
http://images.cnitblog.com/blog/463154/201212/21111024-46373f4f86bd4b33ac5f45e411640578.png
最后附上代码：
<div class="cnblogs_code"><!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.index = i; star.onmouseover = function(){ clear(); for(var j = 0; j < this.index + 1; j++){ star.style.backgroundPosition = '0 0'; } } star.onmouseout = function(){ for(var j = 0; j < this.index + 1; j++){ star.style.backgroundPosition = '0 -20px'; } current(temp); } star.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.style.backgroundPosition = '0 -20px'; } } //显示当前第几颗星 function current(temp){ for(var i = 0; i < temp; i++){ star.style.backgroundPosition = '0 0'; } }};</script>
页:
[1]