根據數值，按百分比顯示星星的寬度（求幫忙，急！！！）
阿新 • • 發佈：2019-02-12
誰能幫忙寫這樣一個方法？
星星最大值= 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 onclick="getStar(1)" onmouseover="infen(1)" href="javascript:makeRequest('http://www.17sucai.com/pins/ratings/716/1','EchoReturnedText','GET','');" class="star1">1</a></li>
<li><a onclick="getStar(2)" onmouseover="infen(2)" href="javascript:makeRequest('http://www.17sucai.com/pins/ratings/716/2','EchoReturnedText','GET','');" class="star2">2</a></li>
<li><a onclick="getStar(3)" onmouseover="infen(3)" href="javascript:makeRequest('http://www.17sucai.com/pins/ratings/716/3','EchoReturnedText','GET','');" class="star3">3</a></li>
<li><a onclick="getStar(4)" onmouseover="infen(4)" href="javascript:makeRequest('http://www.17sucai.com/pins/ratings/716/4','EchoReturnedText','GET','');" class="star4">4</a></li>
<li><a onclick="getStar(5)" onmouseover="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><!--<span class="no">(已有<label id="pfren">48</label>人評分)</span>--></p>
</div>
</body>
</html>