根据数值，按百分比显示星星的宽度（求帮忙，急！！！）

最新推荐文章于 2021-06-11 15:09:37 发布

lipingt101

最新推荐文章于 2021-06-11 15:09:37 发布

阅读量1.1k

点赞数

分类专栏： js 文章标签： function html javascript css

本文链接：https://blog.csdn.net/lipingt101/article/details/34925593

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

谁能帮忙写这样一个方法？

星星最大值= 5分
星星宽度=100px

当 pfshi 的值（1.2 的id）=1--5（包括小数），星星的宽度由灰变亮按百分比平均显示

比如：

可以看一下页面代码
------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript制作影视网站星级打分代码</title>
<meta name="description" content="javascript特效制作各大影视网站流行的星级打分代码效果，通过鼠标滑过星星，来给电影或视频打分评论的效果。" />
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif , "新宋体";}
/* sitelogo */
#sitelogo{position:relative;margin:40px auto;width:430px;height:54px;border:solid 1px #ddd;padding:10px 10px 0 10px;}
#sitelogo span{display:block;float:left;}
#sitelogo img{border:#e0e0e0 1px solid;padding:2px;}
#sitelogo a:hover img{border:#69f 1px solid;padding:2px;}
/* sitelogo ul */
#sitelogo ul{display:block;float:left;width:100px;height:28px;position:relative;background: url('http://www.17sucai.com/static/images/starrating.gif') top left repeat-x;margin:22px 5px 0 32px;}
#sitelogo ul li{float:left;}
#sitelogo ul li a{display:block;width:10px;height:28px;text-indent:-9000px;z-index:20;position:absolute;overflow:hidden;}
#sitelogo ul li a:hover{background:url('http://www.17sucai.com/static/images/starrating.gif') left 35px;z-index:2;left:0;}
#sitelogo ul a.star1{left:0px;}
#sitelogo ul a.star1:hover{width:20px;}
#sitelogo ul a.star2{left:20px;}
#sitelogo ul a.star2:hover{width:40px;}
#sitelogo ul a.star3{left:40px;}
#sitelogo ul a.star3:hover{width:60px;}
#sitelogo ul a.star4{left:60px;}
#sitelogo ul a.star4:hover{width:80px;}
#sitelogo ul a.star5{left:80px;}
#sitelogo ul a.star5:hover{width:100px;}
#currentrating{background:url('images/starrating.gif') left 35px;position:absolute;height:21px;width:0;display:block;text-indent:-9000px;z-index:1;}
#sitelogo #pftip{position:absolute;top:8px;left:108px;width:200px;color:#999;font-size:14px;}
#sitelogo #pfno{margin:24px 8px 0 0;width:40px;color:green;font-family:Arial;font-weight:bold;font-size:14px;}
#sitelogo p{width:110px;float:left;color:#666;}
#sitelogo p span{font-family:Arial;font-style:italic;color:#f60;}
#sitelogo #pfshi{font-size:32px;line-height:28px;font-weight:bold;}
#sitelogo #pfge{font-size:18px;line-height:22px;}
#sitelogo p span.no{width:110px;clear:both;color:#666;font-style:normal;font-size:12px;}
</style>

<script type="text/javascript">
function GI(id){
return document.getElementById(id);
}
/*function infen(var1){
var fentip=new Array("","很差，浪费生命","很差，浪费生命","不喜欢","不喜欢","一般，不妨一看","一般，不妨一看","一般，不妨一看","喜欢，值得推荐","喜欢，值得推荐","非常喜欢，不容错过");
if (var1>0){
GI("pfno").innerHTML=var1+"分 ";
GI("pftip").innerHTML=fentip[var1];
GI("currentrating").style.display="none";
}
else{
GI("pfno").innerHTML="";
GI("pftip").innerHTML="";
GI("currentrating").style.display="block";
}
}
*/
function getStar(num){
infen(num);
GI("currentrating").style.width=(num*20)+"px";
GI("currentrating").style.display="block";
}

</script>

<div id="sitelogo">
<span><a href="http://www.msi.com/language/" target="_blank"></a></span>
<ul class="starrating">
<li id="currentrating"></li>
<li><a οnclick="getStar(1)" οnmοuseοver="infen(1)" href="javascript:makeRequest('http://www.17sucai.com/pins/ratings/716/1','EchoReturnedText','GET','');" class="star1">1</a></li>
<li><a οnclick="getStar(2)" οnmοuseοver="infen(2)" href="javascript:makeRequest('http://www.17sucai.com/pins/ratings/716/2','EchoReturnedText','GET','');" class="star2">2</a></li>
<li><a οnclick="getStar(3)" οnmοuseοver="infen(3)" href="javascript:makeRequest('http://www.17sucai.com/pins/ratings/716/3','EchoReturnedText','GET','');" class="star3">3</a></li>
<li><a οnclick="getStar(4)" οnmοuseοver="infen(4)" href="javascript:makeRequest('http://www.17sucai.com/pins/ratings/716/4','EchoReturnedText','GET','');" class="star4">4</a></li>
<li><a οnclick="getStar(5)" οnmοuseοver="infen(5)" href="javascript:makeRequest('http://www.17sucai.com/pins/ratings/716/5','EchoReturnedText','GET','');" class="star5">5</a></li>
</ul>
<span id="pftip"></span>
<span id="pfno"></span>
<p><span id="pfshi" style="padding-top:18px">1.2</span></p>
</div>

</body>
</html>

lipingt101

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
根据数值，按百分比显示星星的宽度（求帮忙，急！！！）

[b]谁能帮忙写这样一个方法？[/b]星星最大值= 5分星星宽度=100px当 pfshi 的值（1.2 的id）=1--5（包括小数），星星的宽度由灰变亮按百分比平均显示比如：[img=http://img.bbs.csdn.net/upload/201406/26/1403787374_64951.jpg][/img]可以看一下页
复制链接

扫一扫