AJAX评分

最新推荐文章于 2024-09-17 14:30:35 发布

xzr2004

最新推荐文章于 2024-09-17 14:30:35 发布

阅读量937

点赞数

分类专栏： ASP.NET 文章标签： ajax function float javascript html url

ASP.NET 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

html代码:

<html>
    <head>
        <script type="text/javascript" language="javascript" src="ratingsys.js"></script>
        <style type="text/css">
    #rateStatus{float:left; clear:both; width:100%; height:20px;}
    #rateMe{ clear:both; width:100%; padding:0px; margin:0px;}
    #rateMe li{float:left;list-style:none;}
    #rateMe li a:hover,
    #rateMe .on{background:url(star_on.gif) no-repeat;width:12px;height:12px;}
    #rateMe a{float:left;background:url(star_off.gif) no-repeat;width:12px; height:12px;}
    #ratingSaved{display:none;}
    .saved{color:red; }
   </style>
    </head>
    <body>

<span id="rateStatus">评分...</span>
<span id="ratingSaved">评分结果!</span>
<div id="rateMe" title="评分...">
    <a οnclick="rateIt(this)" id="_1" title="较差" οnmοuseοver="rating(this)" οnmοuseοut="off(this)"></a>
    <a οnclick="rateIt(this)" id="_2" title="还可以" οnmοuseοver="rating(this)" οnmοuseοut="off(this)"></a>
    <a οnclick="rateIt(this)" id="_3" title="好" οnmοuseοver="rating(this)" οnmοuseοut="off(this)"></a>
     <a οnclick="rateIt(this)" id="_4" title="相当好" οnmοuseοver="rating(this)" οnmοuseοut="off(this)"></a>
      <a οnclick="rateIt(this)" id="_5" title="好极了" οnmοuseοver="rating(this)" οnmοuseοut="off(this)"></a>
</div>
    </body>

</html>

js源码：

var sMax;    // 最大数量的星星即最大评分值
var holder; // 鼠标停留的评分控件
var preSet; // 保存了评分值（通过单击来进行评分）
var rated; //是否评分过，并保存了结果（注意此值一旦设为空，就不能再评分）

// 鼠标停留事件
function rating(num){
    sMax = 0;    // 默认值为0
    for(n=0; n<num.parentNode.childNodes.length; n++){
        if(num.parentNode.childNodes[n].nodeName == "A"){
            sMax++;
        }
    }

    if(!rated){
        s = num.id.replace("_", ''); // 获取选中的星星的索引，这里使用_1,_2,_3,_4,_5来做为评分控件的ID，当然也有其他的方式。
        a = 0;
        for(i=1; i<=sMax; i++){
            if(i<=s){
                document.getElementById("_"+i).className = "on";
                document.getElementById("rateStatus").innerHTML = num.title;
                holder = a+1;
                a++;
            }else{
                document.getElementById("_"+i).className = "";
            }
        }
    }
}

// 离开事件
function off(me){
    if(!rated){
        if(!preSet){
            for(i=1; i<=sMax; i++){
                document.getElementById("_"+i).className = "";
                document.getElementById("rateStatus").innerHTML = me.parentNode.title;
            }
        }else{
            rating(preSet);
            //document.getElementById("rateStatus").innerHTML = document.getElementById("ratingSaved").innerHTML;
        }
    }
}

// 点击进行评分
function rateIt(me){
    if(!rated){
        document.getElementById("rateStatus").innerHTML = me.title;//document.getElementById("ratingSaved").innerHTML + " :: "+
        preSet = me;
        //rated=1; //设为1以后，就变成了最终结果，不能再修改评分结果
        sendRate(me);
        rating(me);
    }
}

//使用Ajax或其他方式发送评分结果
function sendRate(sel){
    //alert("评分结果: "+sel.title);
}