js星星评分的例子 js多组星星点评

发布时间:2020-12-01编辑:脚本学堂
本文介绍了js实现星星评分的一例代码,当鼠标移过时,点亮最前的星星及跟随之后的星星,当鼠标移开时,如果浏览者未点击过星星;将所有星星都取消点亮,若星星已点击过,点亮之前已点亮的星星。

js星星评分效果图:

js实现星星评分

项目需求:做拖动的活动星星选取的评分效果。

点评星星有三个事件:
1,当鼠标移过时,点亮最前的星星及跟随之后的星星。
2,当鼠标移开时,如果浏览者未点击过星星;将所有星星都取消点亮。若星星已点击过,点亮之前已点亮的星星。
3,当鼠标点击某个星星时,自动保存该星星的值;以备保存到数据表。
此代码可支持多组星星点评。

完整代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> evaluate page </title>
<style type="css/text"></style>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<meta name="generator" content="editplus">
<meta name="keywords" content="key">
<meta name="description" content="desc">
<style type="text/css">
body{
    font-size:12px;
    }
    span{
    margin-left:5px;
    }
    div a{
            float:left;
    width:18px;
    height:17px;
    background:url("images/img1.jpg") no-repeat;
    
    }
    div .click_on{
    background:url("images/img2.jpg") no-repeat;
    
    }
</style>
</head>
<body>
      <script type="text/javascript">
      <!--
   function star_onmouse_over($objName,$index,$msg_id){
     
     $obj=document.getElementsByName($objName);
     $count=$obj.length; //星星的数量
     for ($i=0;$i<$count;$i++ )
     {
     $obj[$i].className=$i<$index?"click_on":"";     
     } // www.jb200.com
     document.getElementById($msg_id).innerHTML=$obj[$index-1].title;
   }
   function star_onmouse_out($objName,$star_val_obj,$msg_id){   
     
     $obj=document.getElementsByName($objName);
     $count=$obj.length;
     $star_val=document.getElementById($star_val_obj).value;
     if($star_val==0){
      for ($i=0;$i<$count;$i++ )
      {
      $obj[$i].className="";
     
      }
     document.getElementById($msg_id).innerHTML='<font color="red">请对星星进行评分</font>';
     }
     else{
   
     star_onmouse_over($objName,$star_val,$msg_id)
     }
   }
   function star_onclick($star_val_obj,$index){
   
    document.getElementById($star_val_obj).value=$index;
  
   }
      //-->
      </script>
   <h3>您对点评星星效果的意见</h3>
   <div>
      <a name="star1[]" title="差" onmouseover="star_onmouse_over(this.name,1,'show_msg')" onmouseout="star_onmouse_out(this.name,'score','show_msg')" onclick="star_onclick('score',1)"></a>
      <a name="star1[]" title="一般" onmouseover="star_onmouse_over(this.name,2,'show_msg')" onmouseout="star_onmouse_out(this.name,'score','show_msg')" onclick="star_onclick('score',2)"></a>
      <a name="star1[]" title="好" onmouseover="star_onmouse_over(this.name,3,'show_msg')" onmouseout="star_onmouse_out(this.name,'score','show_msg')" onclick="star_onclick('score',3)"></a>
      <a name="star1[]" title="很好" onmouseover="star_onmouse_over(this.name,4,'show_msg')" onmouseout="star_onmouse_out(this.name,'score','show_msg')" onclick="star_onclick('score',4)"></a>
      <a name="star1[]" title="非常好" onmouseover="star_onmouse_over(this.name,5,'show_msg')" onmouseout="star_onmouse_out(this.name,'score','show_msg')" onclick="star_onclick('score',5)"></a>
   <span id="show_msg"><font color="red">请对星星进行评分</font></span>
   <input id="score" name="score" type="hidden" value="0">
   </div>
</body>
</html>