javascript 星星评价(转)
第一种
http://www.cnblogs.com/java-boy/archive/2011/09/01/2162578.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>星星打分</title> <style type="text/css"> .evalInfo{ font-size: 13px; font-family: '宋体'; margin: 3 5px; } </style> <script type="text/javascript">/** 用星星的方式来打分， **/function evalSorce(rootEle, oEvent, targetObjId,attitudeTitleId) { var imgs = rootEle.getElementsByTagName("img"); //var e = oEvent || window.event; var eventTarget = window.event.srcElement||eventTag.target; var clickedImgValue = eventTarget.value; for(var i=0; i<imgs.length; i++) { var tempImg = imgs[i]; if(tempImg.value <= clickedImgValue){ tempImg.src ='/JSTest/img/bright.gif'; }else { tempImg.src ='/JSTest/img/dark.gif'; } } var targetObj = document.getElementById(targetObjId); targetObj.value = clickedImgValue; var attitudeTitle = document.getElementById(attitudeTitleId); attitudeTitle.innerHTML = eventTarget.title; }</script> </head> <body> <input name="attitude" id="attitudeId" value="0"> <span onclick="evalSorce(this, event, 'attitudeId','attitudeTitle')"> <img title="非常差" value='1' src='/JSTest/img/dark.gif' /> <img title="较差" value='2' src='/JSTest/img/dark.gif' /> <img title="一般" value='3' src='/JSTest/img/dark.gif' /> <img title="较好" value='4' src='/JSTest/img/dark.gif' /> <img title="非常好" value='5' src='/JSTest/img/dark.gif' /> <span id="attitudeTitle" class='evalInfo'></span> </span> </body></html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>评价打分星星效果</title><script type="text/javascript">function rate(obj,oEvent){var imgSrc = 'http://image1.koubei.com/images/store/icon_star_1.gif';var imgSrc_2 = 'http://image1.koubei.com/images/store/icon_star_2.gif';if(obj.rateFlag) return;var e = oEvent || window.event;var target = e.target || e.srcElement; var imgArray = obj.getElementsByTagName("img");for(var i=0;i<imgArray.length;i++){ imgArray[i]._num = i; imgArray[i].onclick=function(){ if(obj.rateFlag) return; alert(this._num+1);var inputid=this.parentNode.previousSiblinginputid.value=this._num+1; }}if(target.tagName=="IMG"){ for(var j=0;j<imgArray.length;j++){ if(j<=target._num){ imgArray[j].src=imgSrc_2; } else { imgArray[j].src=imgSrc; }target.parentNode.onmouseout=function(){var imgnum=parseInt(target.parentNode.previousSibling.value);for(n=0;n<imgArray.length;n++){imgArray[n].src=imgSrc;}for(n=0;n<imgnum;n++){imgArray[n].src=imgSrc_2;}} }} else { return false;}}</script></head><body><input type="hidden" value="0"/><p onmouseover="rate(this,event)"><img src="http://image1.koubei.com/images/store/icon_star_1.gif" title="很烂" /><img src="http://image1.koubei.com/images/store/icon_star_1.gif" title="一般" /><img src="http://image1.koubei.com/images/store/icon_star_1.gif" title="还好" /><img src="http://image1.koubei.com/images/store/icon_star_1.gif" title="较好" /><img src="http://image1.koubei.com/images/store/icon_star_1.gif" title="很好" /></p></body></html>