csdn上下载时的评分效果是如何实现的！！帮帮忙

我到现在都不怎么会用那个下载评分的功能
csdn这个做的用户体验太差了，而且还有好多问题的，我去结贴，有的帖子是显示未结帖的，但是我点去结贴的时候又告诉我已经结贴了

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

我想用js去实现这种效果，可是js我不太懂，那几个小星星是如何显示的！能给点详细代码吗？？
其实感觉csdn在效果上做得一般，内容还是比较不错评分可以用Ajax啊，点击事件发生就发送request，客户端js做更新就可以了
可以考虑用js框架中的Ajax做，这样可能会方便些
对于分数，用ajax去处理返回计算后的分数就可以了，对于界面的处理，给一个下面的代码演示，其中：
<!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>无标题文档 </title>
<style>
div{
float:left;
width:13px;
height:14px;
}
.c1{
border:1px solid #999;
}
.c2{
border:1px solid #999;
background-color:#F00;
}
</style>
<script>
function change(n){
var i = 1;
while(i<=n){
document.getElementById("d"+i).className = "c2";
i++;
}
while(i<=5){
document.getElementById("d"+i).className = "c1";
i++;
}
}
</script>
</head>
<body onload="change(0)">
<div id="d1"></div><div id="d2"></div><div id="d3"></div><div id="d4"></div><div id="d5"></div>
<select style="width:100px" onchange="change(this.value)">
<option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
</body>
</html>
把当中的样式改成系显示相应的图就可以了
是不是这样<!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 "  />
<style>
div{
float:left;
width:13px;
height:14px;
}
.c1{
background-color:#FFF;
border:1px solid #F00;
}
.c2{
background-color:#F00;
border:1px solid #F00;
}
</style>
<script>
function change(n, bl){
for(var i=1;i<=n;i++){
document.getElementById("d" + i).className = bl?"c2":"c1";
}
}
</script>
</head>
<body>
<script>
for(var i=1;i<=5;i++){
document.write("<div class='c1' id='d" + i + "' onclick='alert(\"" + i + "分\");' onmouseover='change(" + i + ", true);' onmouseout='change(" + i + ", false);'> </div>");
}
</script>
<div id="d2"> </div> <div id="d3"> </div> <div id="d4"> </div> <div id="d5"> </div>
</body>
</html>
<div id="d2"> </div> <div id="d3"> </div> <div id="d4"> </div> <div id="d5"> </div>
是多余的忘去掉
点击评分，触发Ajax程序，上传本次评分，并刷新平均分
原理我懂，但是Ajax我学的不怎么样，所以想找个现成的例子看看。
终于模拟好了  连接服务器自己写吧<!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 "  />
<style>
div{
position:absolute;
width:16px;
height:16px;
background:url(kong.png);
z-index:1;
}
img{
position:absolute;
width:16px;
height:16px;
z-index:2;
}
</style>
<script>
var nowScore = 0.001;
var n = 0;
function change(n){
for(var i=1;i<=n;i++){
document.getElementById("img" + i).src = "http://www.woyaoyin.cn/SendedFiles/131399/200812161229390478651.jpg";
document.getElementById("img" + i).style.clip = "rect(0px 16px 16px 0px)";
}
} function changeOut(n){
var now = Math.ceil(nowScore);
for(var i=1;i<=5;i++){
if(i > now)
document.getElementById("img" + i).src = "http://www.woyaoyin.cn/SendedFiles/131399/200812161229390464050.png";
}
document.getElementById("img" + now).style.clip = "rect(0px " + Math.floor((1-now+nowScore)*16) + "px 16px 0px)";
} function count(i){
nowScore = (nowScore * n + i)/(n + 1);
n++;
var now = Math.ceil(nowScore);
for(var j=1;j<=now;j++){
document.getElementById("img" + j).src = "man.jpg";
}
document.getElementById("img" + now).style.clip = "rect(0px " + Math.floor((1-now+nowScore)*16) + "px 16px 0px)";
alert("你选" + i + "分平均" + nowScore + "分");
}
</script>
</head>
<body>
<script>
for(var i=1;i<=5;i++){
document.write("<div id='d" + i + "' onclick='count(" + i + ");' onmouseover='change(" + i + ");' onmouseout='changeOut(" + i + ");' style='top:16px;left:" + 16*i + "px'></div><img id='img" + i + "'src='kong.png' onclick='count(" + i + ");' onmouseover='change(" + i + ");' onmouseout='changeOut(" + i + ");' style='top:16px;left:" + 16*i + "px'>");
}
</script>
</body>
</html>
上面有个地方图片错了<!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 "  />
<style>
div{
position:absolute;
width:16px;
height:16px;
background:url(http://www.woyaoyin.cn/SendedFiles/131399/200812161229390464050.png);
z-index:1;
}
img{
position:absolute;
width:16px;
height:16px;
z-index:2;
}
</style>
<script>
    var nowScore = 0.001;
    var n = 0;
    function change(n){
        for(var i=1;i<=n;i++){
            document.getElementById("img" + i).src = "http://www.woyaoyin.cn/SendedFiles/131399/200812161229390478651.jpg";
            document.getElementById("img" + i).style.clip = "rect(0px 16px 16px 0px)";
        }
    }     function changeOut(n){
        var now = Math.ceil(nowScore);
        for(var i=1;i<=5;i++){
            if(i > now)
            document.getElementById("img" + i).src = "http://www.woyaoyin.cn/SendedFiles/131399/200812161229390464050.png";
        }
        document.getElementById("img" + now).style.clip = "rect(0px " + Math.floor((1-now+nowScore)*16) + "px 16px 0px)";
    }    function count(i){
        nowScore = (nowScore * n + i)/(n + 1);
        n++;
        var now = Math.ceil(nowScore);
        for(var j=1;j<=now;j++){
            document.getElementById("img" + j).src = "man.jpg";
        }
        document.getElementById("img" + now).style.clip = "rect(0px " + Math.floor((1-now+nowScore)*16) + "px 16px 0px)";
        alert("你选" + i + "分平均" + nowScore + "分");
    }
</script>
</head>
<body>
<script>
    for(var i=1;i<=5;i++){
        document.write("<div id='d" + i + "' onclick='count(" + i + ");' onmouseover='change(" + i + ");' onmouseout='changeOut(" + i + ");' style='top:16px;left:" + 16*i + "px'></div><img id='img" + i + "'src='kong.png' onclick='count(" + i + ");' onmouseover='change(" + i + ");' onmouseout='changeOut(" + i + ");' style='top:16px;left:" + 16*i + "px'>");
    }
</script>
</body>
</html>