javascript 星星评估(转)
日期：2014-05-16 浏览次数：20534 次
javascript 星星评价(转)
第一种
http://www.cnblogs.com/java-boy/archive/2011/09/01/2162578.html
======================================================================
第二种
http://bbs.blueidea.com/thread-2980364-1-1.html
第一种
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="较好" /><
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
