js改变评论的效果
<!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>
<style type="text/css">
<!--
img {
border:0;
}
-->
</style>
</head>
<script>
var sArray = new Object;
sArray = new Image;
sArray.src = "icon_star_1.gif";
for (var i=1; i<6; i++) {
sArray = new Image();
sArray.src = "icon_star_2.gif";
}
var pro ;
var rate ;
function initStar() {
try {
setProfix("fuwu_");
setStars(document.getElementById("fuwu").value,'fuwu');
setProfix("zl_");
setStars(document.getElementById("zl").value,'zl');
setProfix("xjb_");
setStars(document.getElementById("xjb").value,'xjb');
setProfix("hj_");
setStars(document.getElementById("hj").value,'hj');
} catch(e){
}
}
function showStars(starNum,rate) {
try {
greyStars();
colorStars(starNum);
} catch(e){}
//setStars(starNum,rate);
}
function setProfix(profix) {
pro = profix ;
}
function colorStars(starNum) {
try {
for (var i=1; i <= starNum; i++) {
var tmpStar = document.getElementById(pro + i);
tmpStar.src = sArray.src;
}
} catch(e){}
}
function greyStars() {
try {
for (var i=1; i<6; i++) {
var tmpStar = document.getElementById(pro + i);
tmpStar.src = sArray.src;
}
} catch(e){}
}
function greyAll(curpro,currate) {
try {
document.getElementById(currate).value ="";
for (var i=1; i<6; i++) {
var tmpStar = document.getElementById(curpro + i);
tmpStar.src = sArray.src;
}
} catch(e){}
}
function setStars(starNum,rate) {
rate = rate ;
try {
var fuwu = document.getElementById(rate);
fuwu.value = starNum;
showStars(starNum);
} catch(e){}
}
function clearStars(currate) {
rate = currate ;
try {
var fuwu = document.getElementById(rate);
if (fuwu.value != '') {
setStars(fuwu.value,rate);
} else {
greyStars();
}
} catch(e){}
}
function resetStars() {
try {
var fuwu = document.getElementById(rate);
if (fuwu.value != '') {
setStars(fuwu.value,rate);
} else {
greyStars();
}
} catch(e){}
}
</script>
<body>
<ul class="Star">
<li>
<span class="number">*</span>服务
<span class="Select">
<aonmouseout="javascript:setProfix('fuwu_');clearStars('fuwu');" href="javascript:setProfix('fuwu_');setStars(1,'fuwu');"><img id="fuwu_1" title="差(1)" src="icon_star_1.gif"></a>
<aonmouseout="javascript:setProfix('fuwu_');clearStars('fuwu');" href="javascript:setProfix('fuwu_');setStars(2,'fuwu');"><img id="fuwu_2" title="一般(2)" src="icon_star_1.gif"></a>
<aonmouseout="javascript:setProfix('fuwu_');clearStars('fuwu');" href="javascript:setProfix('fuwu_');setStars(3,'fuwu');"><img id="fuwu_3" title="好(3)" src="icon_star_1.gif"></a>
<aonmouseout="javascript:setProfix('fuwu_');clearStars('fuwu');" href="javascript:setProfix('fuwu_');setStars(4,'fuwu');"><img id="fuwu_4" title="很好(4)" src="icon_star_1.gif"></a>
<aonmouseout="javascript:setProfix('fuwu_');clearStars('fuwu');" href="javascript:setProfix('fuwu_');setStars(5,'fuwu');"><img id="fuwu_5" title="非常好(5)" src="icon_star_1.gif"></a>
</span>
</li>
<li>
<span class="number">*</span>质量
<span class="Select">
<aonmouseout="javascript:setProfix('zl_');clearStars('zl');" href="javascript:setProfix('zl_');setStars(1,'zl');"><img id="zl_1" title="差(1)" src="icon_star_1.gif"></a>
<aonmouseout="javascript:setProfix('zl_');clearStars('zl');" href="javascript:setProfix('zl_');setStars(2,'zl');"><img id="zl_2" title="一般(2)" src="icon_star_1.gif"></a>
<aonmouseout="javascript:setProfix('zl_');clearStars('zl');" href="javascript:setProfix('zl_');setStars(3,'zl');"><img id="zl_3" title="好(3)" src="icon_star_1.gif"></a>
<aonmouseout="javascript:setProfix('zl_');clearStars('zl');" href="javascript:setProfix('zl_');setStars(4,'zl');"><img id="zl_4" title="很好(4)" src="icon_star_1.gif"></a>
<aonmouseout="javascript:setProfix('zl_');clearStars('zl');" href="javascript:setProfix('zl_');setStars(5,'zl');"><img id="zl_5" title="非常好(5)" src="icon_star_1.gif"></a>
</span>
</li>
<li>
<span class="number">*</span>环境
<span class="Select">
<aonmouseout="javascript:setProfix('hj_');clearStars('hj');" href="javascript:setProfix('hj_');setStars(1,'hj');"><img id="hj_1" title="差(1)" src="icon_star_1.gif"></a>
<aonmouseout="javascript:setProfix('hj_');clearStars('hj');" href="javascript:setProfix('hj_');setStars(2,'hj');"><img id="hj_2" title="一般(2)" src="icon_star_1.gif"></a>
<aonmouseout="javascript:setProfix('hj_');clearStars('hj');" href="javascript:setProfix('hj_');setStars(3,'hj');"><img id="hj_3" title="好(3)" src="icon_star_1.gif"></a>
<aonmouseout="javascript:setProfix('hj_');clearStars('hj');" href="javascript:setProfix('hj_');setStars(4,'hj');"><img id="hj_4" title="很好(4)" src="icon_star_1.gif"></a>
<aonmouseout="javascript:setProfix('hj_');clearStars('hj');" href="javascript:setProfix('hj_');setStars(5,'hj');"><img id="hj_5" title="非常好(5)" src="icon_star_1.gif"></a>
</span>
</li>
<li>
<span class="number">*</span>性价比
<span class="Select">
<aonmouseout="javascript:setProfix('xjb_');clearStars('xjb');" href="javascript:setProfix('xjb_');setStars(1,'xjb');"><img id="xjb_1" title="差(1)" src="icon_star_1.gif"></a>
<aonmouseout="javascript:setProfix('xjb_');clearStars('xjb');" href="javascript:setProfix('xjb_');setStars(2,'xjb');"><img id="xjb_2" title="一般(2)" src="icon_star_1.gif"></a>
<aonmouseout="javascript:setProfix('xjb_');clearStars('xjb');" href="javascript:setProfix('xjb_');setStars(3,'xjb');"><img id="xjb_3" title="好(3)" src="icon_star_1.gif"></a>
<aonmouseout="javascript:setProfix('xjb_');clearStars('xjb');" href="javascript:setProfix('xjb_');setStars(4,'xjb');"><img id="xjb_4" title="很好(4)" src="icon_star_1.gif"></a>
<aonmouseout="javascript:setProfix('xjb_');clearStars('xjb');" href="javascript:setProfix('xjb_');setStars(5,'xjb');"><img id="xjb_5" title="非常好(5)" src="icon_star_1.gif"></a>
</span>
</li>
</ul>
<input id="fuwu" name="fuwu" value="4" type="text">
<input id="zl" name="zl" value="" type="text">
<input id="hj" name="hj" value="" type="text">
<input id="xjb" name="xjb" value="" type="text">
<script>
initStar();
</script>
</body>
</html>
页:
[1]