zoukankan      html  css  js  c++  java
  • 星星 评价 多组 功能实现 ,请高手们优化一下!

      1 <head runat="server">
      2     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      3     <title></title>
      4     <link href="../css/star.css" rel="stylesheet" />
      5     <script src="../js/star.js"></script>
      6 </head>
      7 <body>
      8     <form id="form1" runat="server">
      9         <div class="layer comment">
     10             <h3 class="layer">我要点评||</h3>
     11             <div class="col">
     12                 <textarea name='comment' runat="server" id="TxtCommentcomtent"></textarea>
     13             </div>
     14             <div>
     15                 <ul class="col">
     16                     <li>
     17                         <div id="star1" class="star">
     18                             <span style="float: left;">环境:</span>
     19                             <ul id="colul" style="float: left">
     20                                 <li>
     21                                     <asp:CheckBox ID="CheckBox1" Text="1" runat="server" /></li>
     22                                 <li>
     23                                     <asp:CheckBox ID="CheckBox2" Text="2" runat="server" /></li>
     24                                 <li>
     25                                     <asp:CheckBox ID="CheckBox3" Text="3" runat="server" /></li>
     26                                 <li>
     27                                     <asp:CheckBox ID="CheckBox4" Text="4" runat="server" /></li>
     28                                 <li>
     29                                     <asp:CheckBox ID="CheckBox5" Text="5" runat="server" /></li>
     30                             </ul>
     31 
     32                             <span></span>
     33                             <p></p>
     34                             <asp:Label ID="LabelScore1" CssClass="labelScore" runat="server" Text=""></asp:Label>
     35                             <asp:HiddenField ID="HiddenField1" runat="server" Value="" />
     36                         </div>
     37                     </li>
     38 
     39                     <li>
     40                         <div id="star2" class="star">
     41                             <span style="float: left">服务:</span>
     42                             <ul>
     43                                 <li>
     44                                     <asp:CheckBox ID="CheckBox6" Text="1" runat="server" />
     45                                 </li>
     46                                 <li>
     47                                     <asp:CheckBox ID="CheckBox7" Text="2" runat="server" /></li>
     48                                 <li>
     49                                     <asp:CheckBox ID="CheckBox8" Text="3" runat="server" /></li>
     50                                 <li>
     51                                     <asp:CheckBox ID="CheckBox9" Text="4" runat="server" /></li>
     52                                 <li>
     53                                     <asp:CheckBox ID="CheckBox10" Text="5" runat="server" /></li>
     54                             </ul>
     55                             <span></span>
     56                             <p></p>
     57                             <asp:Label ID="LabelScore2" CssClass="labelScore" runat="server"></asp:Label>
     58                             <asp:HiddenField ID="HiddenField2" runat="server" Value="" />
     59                         </div>
     60                     </li>
     61                     <li>
     62                         <div id="star3" class="star">
     63                             <span style="float: left">特色:</span>
     64                             <ul>
     65                                 <li>
     66                                     <asp:CheckBox ID="CheckBox11" Text="1" runat="server" /></li>
     67                                 <li>
     68                                     <asp:CheckBox ID="CheckBox12" Text="2" runat="server" /></li>
     69                                 <li>
     70                                     <asp:CheckBox ID="CheckBox13" Text="3" runat="server" /></li>
     71                                 <li>
     72                                     <asp:CheckBox ID="CheckBox14" Text="4" runat="server" /></li>
     73                                 <li>
     74                                     <asp:CheckBox ID="CheckBox15" Text="5" runat="server" /></li>
     75                             </ul>
     76                             <span></span>
     77                             <p></p>
     78                             <asp:Label ID="LabelScore3" CssClass="labelScore" runat="server"></asp:Label>
     79                             <asp:HiddenField ID="HiddenField3" runat="server" Value="" />
     80                         </div>
     81                     </li>
     82                     <li>
     83                         <div id="star4" class="star">
     84                             <span style="float: left">交通:</span>
     85                             <ul>
     86                                 <li>
     87                                     <asp:CheckBox ID="CheckBox16" Text="1" runat="server" /></li>
     88                                 <li>
     89                                     <asp:CheckBox ID="CheckBox17" Text="2" runat="server" /></li>
     90                                 <li>
     91                                     <asp:CheckBox ID="CheckBox18" Text="3" runat="server" /></li>
     92                                 <li>
     93                                     <asp:CheckBox ID="CheckBox19" Text="4" runat="server" /></li>
     94                                 <li>
     95                                     <asp:CheckBox ID="CheckBox20" Text="5" runat="server" /></li>
     96                             </ul>
     97                             <span></span>
     98                             <p></p>
     99                             <asp:Label ID="LabelScore4" CssClass="labelScore" runat="server"></asp:Label>
    100                             <asp:HiddenField ID="HiddenField4" runat="server" Value="" />
    101                         </div>
    102                     </li>
    103                     <li>
    104                         <div id="star5" class="star">
    105                             <span style="float: left">价格:</span>
    106                             <ul>
    107                                 <li>
    108                                     <asp:CheckBox ID="CheckBox21" Text="1" runat="server" /></li>
    109                                 <li>
    110                                     <asp:CheckBox ID="CheckBox22" Text="2" runat="server" /></li>
    111                                 <li>
    112                                     <asp:CheckBox ID="CheckBox23" Text="3" runat="server" /></li>
    113                                 <li>
    114                                     <asp:CheckBox ID="CheckBox24" Text="4" runat="server" /></li>
    115                                 <li>
    116                                     <asp:CheckBox ID="CheckBox25" Text="5" runat="server" /></li>
    117                             </ul>
    118                             <span></span>
    119                             <p></p>
    120                             <asp:Label ID="LabelScore5" CssClass="labelScore" runat="server"></asp:Label>
    121                             <asp:HiddenField ID="HiddenField5" runat="server" Value="" />
    122                         </div>
    123                     </li>
    124                 </ul>
    125             </div>
    126 
    127 
    128         </div>
    129     </form>
    130 </body>
    View Code
    *{margin:0;padding:0;list-style-type:none;}
    body{color:#666;font:12px/1.5 Arial;}
    /* star */
    .star{position:relative;width:100%;margin:20px auto;height:24px; margin-left:20px}
    .star ul,#star span{float:left;display:inline;height:19px;line-height:19px;}
    .star ul{margin:0 10px;}
    .star ul li{float:left;width:24px;cursor:pointer;text-indent:-9999px;background:url(../img/star.png) no-repeat;}
    .star strong{color:#f60;padding-left:10px;}
    .star li.on{background-position:0 -28px;}
    .star p{position:absolute;top:10px;width:100%;height:60px;display:none;background:url(images/icon.gif) no-repeat;padding:7px 10px 0;}
    .star p em{color:#f60;display:block;font-style:normal;}
    .labelScore { /*display:none;*/ }
    View Code
        window.onload = function () {
            var aMsg = [
                          "很不满意|差得太离谱,与卖家描述的严重不符,非常不满",
                          "不满意|部分有破损,与卖家描述的不符,不满意",
                          "一般|质量一般,没有卖家描述的那么好",
                          "满意|质量不错,与卖家描述的基本一致,还是挺满意的",
                          "非常满意|质量非常好,与卖家描述的完全一致,非常满意"
            ]
    
            var oStar1 = document.getElementById("star1");
            var oStar2 = document.getElementById("star2");
            var oStar3 = document.getElementById("star3");
            var oStar4 = document.getElementById("star4");
            var oStar5 = document.getElementById("star5");
    
      
            var aLi1 = oStar1.getElementsByTagName("li");
            var oUl1 = oStar1.getElementsByTagName("ul")[0];
            var oSpan1 = oStar1.getElementsByTagName("span")[1];
            var oP1 = oStar1.getElementsByTagName("p")[0];
            var i1 = iScore1 = iStar1 = 0;
    
            for (i1 = 1; i1 <= aLi1.length; i1++) {
                aLi1[i1 - 1].index = i1;
    
                //鼠标移过显示分数
                aLi1[i1 - 1].onmouseover = function () {
                    fnPoint1(this.index);
                    //浮动层显示
                    oP1.style.display = "block";
                    //计算浮动层位置
                    oP1.style.left = oUl1.offsetLeft + this.index * this.offsetWidth+ "px";
                    //匹配浮动层文字内容
                    oP1.innerHTML = "<em><b>" + this.index + "</b> 分 " + aMsg[this.index - 1].match(/(.+)|/)[1] + "</em>";
                };
    
                //鼠标离开后恢复上次评分
                aLi1[i1 - 1].onmouseout = function () {
                    fnPoint1();
                    //关闭浮动层
                    oP1.style.display = "none"
                };
    
                //点击后进行评分处理
                aLi1[i1 - 1].onclick = function () {
                       
                    iStar1 = this.index;
                    oP1.style.display = "none";
                    oSpan1.style.left="80px";
                    oSpan1.innerHTML = "<strong>" + (this.index) + " 分</strong> (" + aMsg[this.index - 1].match(/|(.+)/)[1] + ")";
                       
                 
                    document.getElementById("ss_HiddenField1").value = iStar1;
                     
                }
                  
                  
            }
    
            //评分处理
            function fnPoint1(iArg1) {
                //分数赋值
                iScore1 = iArg1 || iStar1;
                for (i1 = 0; i1 < aLi1.length; i1++)
                    aLi1[i1].className = i1 < iScore1 ? "on" : "";
            }
            
            //服务
            var aLi2 = oStar2.getElementsByTagName("li");
            var oUl2 = oStar2.getElementsByTagName("ul")[0];
            var oSpan2 = oStar2.getElementsByTagName("span")[1];
            var oP2 = oStar2.getElementsByTagName("p")[0];
            var i2 = iScore2 = iStar2 = 0;
               
            for (i2 = 1; i2 <= aLi2.length; i2++) {
                aLi2[i2 - 1].index = i2;
    
                //鼠标移过显示分数
                aLi2[i2 - 1].onmouseenter = function () {
                    fnPoint2(this.index);
                    //浮动层显示
                    oP2.style.display = "block";
                    //计算浮动层位置
                    oP2.style.left = oUl2.offsetLeft + this.index * this.offsetWidth + "px";
                    //匹配浮动层文字内容
                    oP2.innerHTML = "<em><b>" + this.index + "</b> 分 " + aMsg[this.index - 1].match(/(.+)|/)[1] + "</em>";
                };
    
                //鼠标离开后恢复上次评分
                aLi2[i2 - 1].onmouseout = function () {
                    fnPoint2();
                    //关闭浮动层
                    oP2.style.display = "none"
                };
    
                //点击后进行评分处理
                aLi2[i2 - 1].onclick = function () {
                    iStar2 = this.index;
                    oP2.style.display = "none";
                    oSpan2.innerHTML = "<strong>" + (this.index) + " 分</strong> (" + aMsg[this.index - 1].match(/|(.+)/)[1] + ")";
                  
                    document.getElementById("ss_HiddenField2").value = iStar2;
                }
            }
    
            //评分处理
            function fnPoint2(iArg2) {
                //分数赋值
                iScore2 = iArg2 || iStar2;
                for (i2 = 0; i2 < aLi2.length; i2++)
                    aLi2[i2].className = i2 < iScore2 ? "on" : "";
            }
            
            //特色
            var aLi3 = oStar3.getElementsByTagName("li");
            var oUl3 = oStar3.getElementsByTagName("ul")[0];
            var oSpan3 = oStar3.getElementsByTagName("span")[1];
            var oP3 = oStar3.getElementsByTagName("p")[0];
            var i3 = iScore3 = iStar3 = 0;
              
            for (i3 = 1; i3 <= aLi3.length; i3++) {
                aLi3[i3 - 1].index = i3;
    
                //鼠标移过显示分数
                aLi3[i3 - 1].onmouseover = function () {
                    fnPoint3(this.index);
                    //浮动层显示
                    oP3.style.display = "block";
                    //计算浮动层位置
                    oP3.style.left = oUl3.offsetLeft + this.index * this.offsetWidth + "px";
                      
                    //匹配浮动层文字内容
                    oP3.innerHTML = "<em><b>" + this.index + "</b> 分 " + aMsg[this.index - 1].match(/(.+)|/)[1] + "</em>";
                };
    
           
                //鼠标离开后恢复上次评分
                aLi3[i3 - 1].onmouseout = function () {
                    fnPoint3();
                    //关闭浮动层
                    oP3.style.display = "none"
                };
    
                //点击后进行评分处理
                aLi3[i3 - 1].onclick = function () {
                    iStar3 = this.index;
                    oP3.style.display = "none";
                    oSpan3.innerHTML = "<strong>" + (this.index) + " 分</strong> ("  + aMsg[this.index - 1].match(/|(.+)/)[1] + ")";
                   
                   document.getElementById("ss_HiddenField3").value = iStar3;
                }
            }
    
            //评分处理
            function fnPoint3(iArg3) {
                //分数赋值
                iScore3 = iArg3 || iStar3;
                for (i3 = 0; i3 < aLi3.length; i3++)
                    aLi3[i3].className = i3 < iScore3? "on" : "";
            }
            
            //交通
            var aLi4 = oStar4.getElementsByTagName("li");
            var oUl4 = oStar4.getElementsByTagName("ul")[0];
            var oSpan4 = oStar4.getElementsByTagName("span")[1];
            var oP4 = oStar4.getElementsByTagName("p")[0];
            var i4 = iScore4 = iStar4 = 0;
              
            for (i4 = 1; i4 <= aLi4.length; i4++) {
                aLi4[i4 - 1].index = i4;
    
                //鼠标移过显示分数
                aLi4[i4 - 1].onmouseover = function () {
                    fnPoint4(this.index);
                    //浮动层显示
                    oP4.style.display = "block";
                    //计算浮动层位置
                    oP4.style.left = oUl4.offsetLeft + this.index * this.offsetWidth+ "px";
                    //匹配浮动层文字内容
                    oP4.innerHTML = "<em><b>" + this.index + "</b> 分 " + aMsg[this.index - 1].match(/(.+)|/)[1] + "</em>";
                };
    
                //鼠标离开后恢复上次评分
                aLi4[i4 - 1].onmouseout = function () {
                    fnPoint4();
                    //关闭浮动层
                    oP4.style.display = "none"
                };
    
                //点击后进行评分处理
                aLi4[i4 - 1].onclick = function () {
                    iStar4 = this.index;
                    oP4.style.display = "none";
                    oSpan4.innerHTML = "<strong>" + (this.index) + " 分</strong> (" + aMsg[this.index - 1].match(/|(.+)/)[1] + ")";
                   
                    document.getElementById("ss_HiddenField4").value = iStar4;
                }
            }
    
            //评分处理
            function fnPoint4(iArg4) {
                //分数赋值
                iScore4 = iArg4 || iStar4;
                for (i4 = 0; i4 < aLi4.length; i4++)
                    aLi4[i4].className = i4 < iScore4 ? "on" : "";
            }
            
            //价格
            var aLi5 = oStar5.getElementsByTagName("li");
            var oUl5 = oStar5.getElementsByTagName("ul")[0];
            var oSpan5 = oStar5.getElementsByTagName("span")[1];
            var oP5 = oStar5.getElementsByTagName("p")[0];
            var i5 = iScore5 = iStar5 = 0;
              
            for (i5 = 1; i5 <= aLi5.length; i5++) {
                aLi5[i5 - 1].index = i5;
    
                //鼠标移过显示分数
                aLi5[i5 - 1].onmouseover = function () {
                    fnPoint5(this.index);
                    //浮动层显示
                    oP5.style.display = "block";
                    //计算浮动层位置
                    oP5.style.left = oUl5.offsetLeft + this.index * this.offsetWidth + "px";
                    //匹配浮动层文字内容
                    oP5.innerHTML = "<em><b>" + this.index + "</b> 分 " + aMsg[this.index - 1].match(/(.+)|/)[1] + "</em>";
                };
    
                //鼠标离开后恢复上次评分
                aLi5[i5 - 1].onmouseout = function () {
                    fnPoint5();
                    //关闭浮动层
                    oP5.style.display = "none"
                };
    
                //点击后进行评分处理
                aLi5[i5 - 1].onclick = function () {
                    iStar5 = this.index;
                    oP5.style.display = "none";
                    oSpan5.innerHTML = "<strong>" + (this.index) + " 分</strong> (" + aMsg[this.index - 1].match(/|(.+)/)[1] + ")";
                    
                    document.getElementById("ss_HiddenField5").value = iStar5;
                }
            }
    
            //评分处理
            function fnPoint5(iArg5) {
                //分数赋值
                iScore5= iArg5 || iStar5;
                for (i5 = 0; i5 < aLi5.length; i5++)
                    aLi5[i5].className = i5 < iScore5 ? "on" : "";
            }
            
        };
    View Code
    永远也不要消极地认为做什么事是不可能的,只要你认 为你能, 尝试, 尝试, 再尝试, 最终你都发现你能。
  • 相关阅读:
    (转)Hibernate框架基础——在Hibernate中java对象的状态
    (转)Hibernate框架基础——cascade属性
    (转)Hibernate框架基础——多对多关联关系映射
    (转)Hibernate框架基础——一对多关联关系映射
    (转)Hibernate框架基础——映射集合属性
    (转)Hibernate框架基础——映射主键属性
    (转)Hibernate框架基础——映射普通属性
    (转)Eclipse在线配置Hibernate Tools
    人物志---川航8633事件
    日常英语---200204(moderately)
  • 原文地址:https://www.cnblogs.com/zhangmu/p/3546446.html
Copyright © 2011-2022 走看看