javascript 星星评价(转)-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_18766/article/details/82168448

本文介绍了一种使用星星图标实现的在线评分系统，包括两种实现方式：一种是通过修改图片源来改变星星的颜色，另一种是通过JavaScript动态更新评分值并显示评价。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种
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>

======================================================================
第二种
http://bbs.blueidea.com/thread-2980364-1-1.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.previousSibling
	inputid.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>