js星星评价

最新推荐文章于 2024-09-09 09:35:48 发布

郭立

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量1.1k

点赞数

分类专栏：技术文章标签： javascript 星星

技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近在做一个项目，需要做拖动的活动星星选取的评分效果。经过收集相关信息后，觉得实现起来并不难；因此做了个
精简实用的星星点评效果在此和大家分享下制作过程心得。
点评星星有三个事件：

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":"";

      }
      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="差" οnmοuseοver="star_onmouse_over(this.name,1,'show_msg')" οnmοuseοut="star_onmouse_out(this.name,'score','show_msg')" οnclick="star_onclick('score',1)"></a>
      <a name="star1[]" title="一般" οnmοuseοver="star_onmouse_over(this.name,2,'show_msg')" οnmοuseοut="star_onmouse_out(this.name,'score','show_msg')" οnclick="star_onclick('score',2)"></a>
       <a name="star1[]" title="好" οnmοuseοver="star_onmouse_over(this.name,3,'show_msg')" οnmοuseοut="star_onmouse_out(this.name,'score','show_msg')" οnclick="star_onclick('score',3)"></a>
       <a name="star1[]" title="很好" οnmοuseοver="star_onmouse_over(this.name,4,'show_msg')" οnmοuseοut="star_onmouse_out(this.name,'score','show_msg')" οnclick="star_onclick('score',4)"></a>
      <a name="star1[]" title="非常好" οnmοuseοver="star_onmouse_over(this.name,5,'show_msg')" οnmοuseοut="star_onmouse_out(this.name,'score','show_msg')" οnclick="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>

郭立

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js星星评价

最近在做一个项目，需要做拖动的活动星星选取的评分效果。经过收集相关信息后，觉得实现起来并不难；因此做了个精简实用的星星点评效果在此和大家分享下制作过程心得。点评星星有三个事件：1.当鼠标移过时，点亮最前的星星及跟随之后的星星。2.当鼠标移开时，如果浏览者未点击过星星；将所有星星都取消点亮。若星星已点击过，点亮之前已点亮的星星。3.当鼠标点击某个星星时，自动保存该星星的值；以备保
复制链接

扫一扫