星级点评效果

最新推荐文章于 2024-11-16 14:11:26 发布

cindylu520

最新推荐文章于 2024-11-16 14:11:26 发布

阅读量111

点赞数

分类专栏： JS 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/cindylu520/article/details/83985165

版权

JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

 var sArray = new Object;
		 sArray[0] = new Image;
		 sArray[0].src = "/images/o/dbx.jpg";
		 for (var i=1; i<6; i++) {
		 sArray[i] = new Image();
		 sArray[i].src = "/images/o/dhx.jpg";
         var starTimer;
		 var pro ;
		 var rate ;
		 function initStar() {
		 	try {
			   setProfix("star_");
			   setStars(document.getElementById("commentImg").value,'commentImg');
			   setProfix("taste_");
			   setStars(document.getElementById("taste").value,'taste');
			   setProfix("price_");
			   setStars(document.getElementById("price").value,'price');
			   setProfix("environment_");
			   setStars(document.getElementById("environment").value,'environment');
		 	} catch(e){
		  	}
		 }
		 function showStars(starNum,rate) {
			 try {
			  clearStarTimer();
			  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[starNum].src;
		   }
		  } catch(e){}
		 }
		 function greyStars() {
		  try {
		   for (var i=1; i<6; i++) {
		    var tmpStar = document.getElementById(pro + i);
		    tmpStar.src = sArray[0].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[0].src;
		   }
		  } catch(e){}
		 }
		 function setStars(starNum,rate) {
		  rate = rate ;
		  try {
		   clearStarTimer();
		   var commentImg = document.getElementById(rate);
		   commentImg.value = starNum;
		   showStars(starNum);
		   } catch(e){}
		 }
		 function clearStars(currate) {
		  rate = currate ;
		  try {
		   var commentImg = document.getElementById(rate);
		   if (commentImg.value != '') {
		    setStars(commentImg.value,rate);
		   } else {
		    greyStars();
		   }
		  } catch(e){}
		 }
		 function resetStars() {
		  try {
		   clearStarTimer();
		   var commentImg = document.getElementById(rate);
		   if (commentImg.value != '') {
		    setStars(commentImg.value,rate);
		   } else {
		    greyStars();
		   }
		  } catch(e){}
		 }
		 function clearStarTimer() {
			  if (starTimer) {
			   clearTimeout(starTimer);
			   starTimer = null;
			  }
		  }
		}

<input type="hidden" id="commentImg" name="commentImg" value="" >
 <a οnmοuseοver="javascript:setProfix('star_');showStars(1,'commentImg');" οnmοuseοut="javascript:setProfix('star_');clearStars('commentImg');" href="javascript:setProfix('star_');setStars(1,'commentImg');"><img src="/images/o/dbx.jpg" id="star_1" width="16" height="16" border="0" alt=""/></a><a οnmοuseοver="javascript:setProfix('star_');showStars(2,'commentImg');" οnmοuseοut="javascript:setProfix('star_');clearStars('commentImg');" href="javascript:setProfix('star_');setStars(2,'commentImg');"><img src="/images/o/dbx.jpg" id="star_2" width="16" height="16" border="0" alt=""/></a><a οnmοuseοver="javascript:setProfix('star_');showStars(3,'commentImg');" οnmοuseοut="javascript:setProfix('star_');clearStars('commentImg');" href="javascript:setProfix('star_');setStars(3,'commentImg');"><img src="/images/o/dbx.jpg" id="star_3" width="16" height="16" border="0" alt=""/></a><a οnmοuseοver="javascript:setProfix('star_');showStars(4,'commentImg');" οnmοuseοut="javascript:setProfix('star_');clearStars('commentImg');" href="javascript:setProfix('star_');setStars(4,'commentImg');"><img src="/images/o/dbx.jpg" id="star_4" width="16" height="16" border="0" alt=""/></a><a οnmοuseοver="javascript:setProfix('star_');showStars(5,'commentImg');" οnmοuseοut="javascript:setProfix('star_');clearStars('commentImg');" href="javascript:setProfix('star_');setStars(5,'commentImg');"><img src="/images/o/dbx.jpg" id="star_5" width="16" height="16" border="0" alt=""/></a>