js星星评分效果示例代码 js星星点评

发布时间:2020-03-15编辑:脚本学堂
本文介绍了js实现星星评分的一例代码,js星星点评效果的实现代码,需要的朋友参考下。

例子,js星星评分效果。

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
 <head>
  <title>星形评分效果-www.jb200.com-脚本学堂</title>
  <meta name="generator" content="editplus">
  <meta name="author" content="moly">
  <meta name="keywords" content="">
  <meta name="description" content="星形评分效果">
 </head>
 <style type="text/css">
.starwrapper{border:0px;padding:5px;width:90px;}
</STYLE>
 <SCRIPT TYPE="text/javascript">
function rate(obj,oEvent){
//==================
// 图片地址设置
//==================
var imgSrc = 'images/icon_star_1.gif';
var imgSrc_2 = 'images/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;
    obj.rateFlag=true;    
 document.getElementById("star").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;
    }
   }
} else {
   for(var k=0;k<imgArray.length;k++){
    imgArray[k].src=imgSrc;
   }
} // www.jb200.com
}
</script>
 <body>
 <form>
 <div>
 给个评价吧!
 <div class="starWrapper" onMouseOver="rate(this,event)">
<img src="images/icon_star_1.gif" title="请用力加油" /><img src="images/icon_star_1.gif" title="要努力哦" />
<img src="images/icon_star_1.gif" title="继续加油" /><img src="images/icon_star_1.gif" title="我还想去" />
<img src="images/icon_star_1.gif" title="极力推荐" />          
 </div>
     <input type="hidden" name="starNum" id="star" value="1">
   <p>评论:
     <textarea name="textarea" rows="10" cols="36" ></textarea>
   </p>
   <p>     
     <input type="submit" name="Submit" value="提交">     
     <input type="reset" name="Submit2" value="取消"> 
   </p>
 </div> 
 </form>
 </body>
</html>