星星评价多组功能实现 ,请高手们优化一下！

  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

posted @ 2014-02-12 18:17 码农沐沐阅读(277) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

码农沐沐

星星 评价 多组 功能实现 ,请高手们优化一下！

公告

星星评价多组功能实现 ,请高手们优化一下！