zoukankan      html  css  js  c++  java
  • 简单的评价星星

    <%-- 鼠标点选,变换评分星的样式 --%>
    function mouseIn(names,index,num){
      backimg(names);
      for(var i=0; i<index; i++){
        jQuery("#"+names+"_"+i).attr("class","integral-mark-star-0");
      }
      jQuery("#"+names).attr("value",num);
    }
    
    <%-- 所有的评分星样式还原 --%>
    function backimg(names){
      for(var i=0; i<5; i++){
        jQuery("#"+names+"_"+i).attr("class","integral-mark-star-1");
      }
    }
    <style>
      .integral-mark-star-1{     background-image: url("${IMAGE_PATH }/integral/star-1.jpg");     cursor: pointer;   }   .integral-mark-star-0{     background-image: url("${IMAGE_PATH }/integral/star-0.jpg");     cursor: pointer;   }
    </style>

    <table border="0" cellspacing="0" cellpadding="0">   <input type="hidden" name="firstStar" id="firstStar">
      <input type="hidden" name="secondStar" id="secondStar">
      <input type="hidden" name="thirdStar" id="thirdStar">
      <input type="hidden" name="fourthStar" id="fourthStar">
      <input type="hidden" name="fivethStar" id="fivethStar">
      <!--注意必须与下面的命名一致-->
      <tr>
        <td height="26">
          <font size="2">物流评价:</font>
          <input type="hidden" name="content" id="content"/>
        </td>
        <td class="integral-mark-star-1" width="28" height="26" id="firstStar_0" onclick="mouseIn('firstStar',1,1)" >
          &nbsp;
        </td>
        <td class="integral-mark-star-1" width="28" height="26" id="secondStar_1" onclick="mouseIn('secondStar',2,2" >
          &nbsp;
        </td>
        <td class="integral-mark-star-1" width="28" height="26" id="thirdStar_2"onclick="mouseIn('thirdStar',3,3" >
          &nbsp;
        </td>
        <td class="integral-mark-star-1" width="28" height="26" id="fourthStar_3"onclick="mouseIn('fourthStar',4,4" >
          &nbsp;
        </td>
        <td class="integral-mark-star-1" width="28" height="26" id="fivethStar_4"onclick="mouseIn('fivethStar',5,5" >
          &nbsp;
        </td>
    </tr>
    </table> </td> </tr> </table>





    结果是这样的:
  • 相关阅读:
    Virtio:针对 Linux 的 I/O 虚拟化框架
    修复MySQL的MyISAM表命令check table用法
    Linux 下用 smartd 监测硬盘状况
    借助JVM生日的时机,说说关于JVM你所不知道的那些事
    实时流计算、Spark Streaming、Kafka、Redis、Exactly-once、实时去重
    使用Kafka、Elasticsearch、Grafana搭建业务监控系统(三)Elasticsearch
    zabbix监控多实例tomcat--不使用JMX
    KAFKA随机产生JMX 端口指定的问题
    nginx+keepalived高可用服务器宕机解决方案
    tomcat 内存参数优化示例
  • 原文地址:https://www.cnblogs.com/susuhyc/p/5670393.html
Copyright © 2011-2022 走看看