lgl669 发表于 2013-2-7 15:14:45

评论星等级 的实现

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>dengji.html</title>
 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=GBK">
   
  <script type="text/javascript">  
   var quantity1=0;
   var quantity2=0;
   var quantity3=0;
   var quantity4=0;
  function aa(num,a){   
               
    for(var i=a*5;i<num;i++)  {  
      var str="img"+(i+1);
      var   img   =   document.getElementById(str);     
      var cc="images/xingyellow2.jpg";
      var index=img.src.indexOf(cc);
      if(index == -1){
             img.src     =   "images/xingonly.jpg";        
      }
      }
    }
   
    function cc(num,a){
           if(num<=5)                quantity1=num;
           if(num>5&&num<=10)        quantity2=num-5;
           if(num>10&&num<=15)       quantity3=num-10;             
           if(num>15&&num<=20)       quantity4=num-15; 
        
      for(var i=a*5;i<num;i++)  { 
     var str="img"+(i+1);
      var   img   =   document.getElementById(str);
            img.src     =   "images/xingyellow2.jpg";  
      }
      document.getElementById(str).onmouseout=function(){};
      for(var j=num;j<(a*5+5);j++)  {  
      var str1="img"+(j+1);
      var   img1   =   document.getElementById(str1);
            img1.src     =   "images/xingonly.jpg";  
      }
      document.getElementById(str).onmouseout=function(){};       
    }
   
   
     function qq(num,a){
           
    for(var i=a*5;i<num;i++)  { 
     var str="img"+(i+1);
      var   img   =   document.getElementById(str);            
    var cc="images/xingyellow2.jpg";
      var index=img.src.indexOf(cc);
      if(index == -1){
             img.src     =   "images/xingyellow1.jpg";
             document.getElementById(str).onmouseout=function(){for(var i=a*5;i<num;i++)  {  
       var str="img"+(i+1);
       var   img   =   document.getElementById(str);     
       var cc="images/xingyellow2.jpg";
       var index=img.src.indexOf(cc);
       if(index == -1){
              img.src="images/xingonly.jpg";        
       }
        }};     
      }  
      }
    }   
   
    function testxing(){
   
    alert("服务:"+quantity1);
    alert("质量:"+quantity2);
    alert("环境:"+quantity3);
    alert("价格:"+quantity4);
   
    }
 </script>
  </head>
 
  <body>
     <form action="" name="form1">
    <table width="100%" border="0" cellspacing="0" cellpadding="0"
     class="bodor">
    
     <tr>
      <td width="90" height="24" align="right" class="ditop">
       <a name="dianping">添加点评</a>
      </td>
      <td width="627" align="left" class="ditop">
        
      </td>
     </tr>
     <tr>
      <td align="left" class="tdco1">
       <ul>
        <li>
         服务
        </li>
        <li>
         <img src="images/xingonly.jpg"
          onmousemove="qq(1,0)" onmouseout="aa(1,0)" alt="差"
          onmousedown="cc(1,0)" id="img1" />
         <img src=" images/xingonly.jpg"
          onmousemove="qq(2,0)" onmouseout="aa(2,0)" alt="一般"
          onmousedown="cc(2,0)" id="img2" />
         <img src=" images/xingonly.jpg"
          onmousemove="qq(3,0)" onmouseout="aa(3,0)" alt="好"
          onmousedown="cc(3,0)" id="img3" />
         <img src=" images/xingonly.jpg"
          onmousemove="qq(4,0)" onmouseout="aa(4,0)" alt="很好"
          onmousedown="cc(4,0)" id="img4" />
         <img src=" images/xingonly.jpg"
          onmousemove="qq(5,0)" onmouseout="aa(5,0)" alt="非常好"
          onmousedown="cc(5,0)" id="img5" />
        </li>
        <li>
         质量
        </li>
        <li>
         <img src=" images/xingonly.jpg"
          onmousemove="qq(6,1)" onmouseout="aa(6,1)" alt="差"
          onmousedown="cc(6,1)" id="img6" />
         <img src=" images/xingonly.jpg"
          onmousemove="qq(7,1)" onmouseout="aa(7,1)" alt="一般"
          onmousedown="cc(7,1)" id="img7" />
         <img src=" images/xingonly.jpg"
          onmousemove="qq(8,1)" onmouseout="aa(8,1)" alt="好"
          onmousedown="cc(8,1)" id="img8" />
         <img src=" images/xingonly.jpg"
          onmousemove="qq(9,1)" onmouseout="aa(9,1)" alt="很好"
          onmousedown="cc(9,1)" id="img9" />
         <img src=" images/xingonly.jpg"
          onmousemove="qq(10,1)" onmouseout="aa(10,1)" alt="非常好"
          onmousedown="cc(10,1)" id="img10" />
        </li>
        <li>环境 </li>
        <li>
         <img src=" images/xingonly.jpg"
          onmousemove="qq(11,2)" onmouseout="aa(11,2)" alt="差"
          onmousedown="cc(11,2)" id="img11" />
         <img src=" images/xingonly.jpg"
          onmousemove="qq(12,2)" onmouseout="aa(12,2)" alt="一般"
          onmousedown="cc(12,2)" id="img12" />
         <img src=" images/xingonly.jpg"
          onmousemove="qq(13,2)" onmouseout="aa(13,2)" alt="好"
          onmousedown="cc(13,2)" id="img13" />
         <img src=" images/xingonly.jpg"
          onmousemove="qq(14,2)" onmouseout="aa(14,2)" alt="很好"
          onmousedown="cc(14,2)" id="img14" />
         <img src=" images/xingonly.jpg"
          onmousemove="qq(15,2)" onmouseout="aa(15,2)" alt="非常好"
          onmousedown="cc(15,2)" id="img15" />
        </li>
        <li>
         价格
        </li>
        <li>
         <img src=" images/xingonly.jpg"
          onmousemove="qq(16,3)" onmouseout="aa(16,3)" alt="差"
          onmousedown="cc(16,3)" id="img16" />
         <img src=" images/xingonly.jpg"
          onmousemove="qq(17,3)" onmouseout="aa(17,3)" alt="一般"
          onmousedown="cc(17,3)" id="img17" />
         <img src=" images/xingonly.jpg"
          onmousemove="qq(18,3)" onmouseout="aa(18,3)" alt="好"
          onmousedown="cc(18,3)" id="img18" />
         <img src=" images/xingonly.jpg"
          onmousemove="qq(19,3)" onmouseout="aa(19,3)" alt="很好"
          onmousedown="cc(19,3)" id="img19" />
         <img src=" images/xingonly.jpg"
          onmousemove="qq(20,3)" onmouseout="aa(20,3)" alt="非常好"
          onmousedown="cc(20,3)" id="img20" />
        </li>
       </ul>
      </td>
     </tr>
    </table>
    <input type="button"value="查看星级"/>
    </form>
  </body>
</html>
===========================================================
 
改改图片的路径就行了 
页: [1]
查看完整版本: 评论星等级 的实现