星星打分

来源:互联网 发布:中国外贸依存度数据 编辑:程序博客网 时间:2024/04/29 09:42
<style type="text/css">
html{ color: #333;font-family: "微软雅黑"; width: 100%; overflow-x: hidden;}
*{margin: 0; padding: 0;}
.replay_right {
float: right;
margin: -24px 10px 0px 0px;
}
#fileList{
list-style:none;
margin:10px 100px;
width:95%;
}
#fileList li{
width:360px;
font-size:13px;
border:1px solid white;
text-align:center;
float:left;

}

#fileList li span{
float:right;
/* background-color:blue; */
background-image:url('<%=basePath%>skins/default/images/all/enclosure_bg.png');
cursor:pointer;
color:white;
}
.clear_allflo{
 overflow:auto;
 zoom:1;
}
#star,#star1{overflow:hidden;}
#star li,#star1 li{
float:left;
width:20px;
height:22px;
margin:2px;
padding:3px;
display:inline;
color:#999;
font:bold 18px arial;
cursor:pointer
}
#star .act,#star1 .act1{
color:#FFD033;

}

</style>




//获取评分
////////////////////评分/////////////////////////////
$(function (){
$("#star").bind("click",ratingS('star','star_word','res',true));
        $("#star1").bind("click",ratingS('star1','star_word1','res1',false));

})
  function ratingS(name,s,res,bo){
var star = document.getElementById(name);
var star_li = star.getElementsByTagName("li");
var star_word = document.getElementById(s);
var i=0;
var j=0;
var act;
var res;
if(bo){
act="act";
res="myd";
}else{
res="xysd";
act="act1";
}
var len = star_li.length;
var word = ['很差','差','一般','好','很好'];
var word1=['很慢','慢','一般','快','非常快'];
 
for(i=0; i<len; i++){
star_li[i].index = i;
star_li[i].onmouseover = function(){
  star_word.style.display = "block";
  if(bo){
  star_word.innerHTML = word[this.index];
}else{
 star_word.innerHTML = word1[this.index];
}
  for(i=0; i<=this.index; i++){
 star_li[i].className = act;

}
star_li[i].onmouseout=function(){
for(i=0; i<=this.index; i++){
 star_li[i].className = '';
 

var j=$("li[id="+act+"]").length;
if($("li[id="+act+"]").length!=0){
 for(k=0;k<j;k++){
star_li[k].className=act;


 
if($("."+act).length!=0){
 if(bo){
  star_word.innerHTML = word[$("."+act).length-1];
}else{
 star_word.innerHTML = word1[$("."+act).length-1];
}
}else{
if(bo){
  star_word.innerHTML = '';
}else{
 star_word.innerHTML = '';
}
}
}
star_li[i].onclick = function(){
$("input[name="+res+"]").val(this.index+1);
 
for(j=0;j<i;j++){
star_li[j].setAttribute("id",act);
}
if(!(star_li[i]==undefined)){
if(star_li[i].getAttribute("id")==act){
for(i; i<len; i++){
 star_li[i].setAttribute("id","");
 star_li[i].className='';
}
}
if(!(star_li[i]==undefined)){
if(star_li[i].className==act){
for(i; i<=len; i++){
star_li[i].className='';
}
}
}
}

}
}
}



<tr height="30px">
<td style="text-align: right;width: 80px;font-size:13px;" >满意度:</td>
<td>
</div><input type="hidden" name="myd" id="myd" readonly="readonly"  />
</div><div style="width: 170px;height:30px;float:left;"><ul id="star">
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
</ul></div>
<div id="star_word" style="font-size:12px;width: 80px;height:30px;float:left;"></div>
</td>
</tr>

<tr height="30px" >
<td  style="text-align: right;width: 80px;font-size:13px;">响应速度:</td>
<td><input type="hidden" readonly="readonly" name="xysd" id="xysd"/>
<div style="width: 170px;height:30px;float:left;">
<ul id="star1">
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
</ul>
</div>
<div id="star_word1" style="font-size:12px;width: 80px;height:30px;float:left;"></div>
</td>
</tr>

原创粉丝点击