星星打分
来源:互联网 发布:中国外贸依存度数据 编辑:程序博客网 时间:2024/04/29 09:42
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>
- 打分星星
- 打分星星
- 星星打分
- 星星打分js
- 【转载】星星打分评价
- 类似淘宝的星星打分
- mobile Web 星星打分 实践
- jq星星评分打分效果
- 优化的打分星星评价效果
- jq+js 实现星星打分功能!
- canvas 作星星打分三维图
- 写了个jquery星星打分效果
- JS特效之星星打分效果
- 仿淘宝的结构新改的星星打分
- JQUERY 动态电影星星打分功能(dedeCMS后台)
- winform仿JS实现类淘宝星星打分
- 打分
- javascript+css好多网站用的选星星实现打分功能的函数
- window.open弹出悬浮框,并传递json参数
- 二分查找及简单应用
- python3 文件复制粘贴简单小例子
- 用GC日志看spark程序是不是在driver,Executor内存效率不高
- 自定义 UDF
- 星星打分
- http://www.runoob.com/java/java-tutorial.html
- 旋转数组的最小数字
- 《UNIX环境高级编程》笔记60--非阻塞IO
- Borrow Classroom 最近公共祖先
- hashmap 前篇
- 从接口获取数据展示弹出框列表
- Android 主题切换/换肤方案 研究(一)
- python基础教程——dict和se