星级评分系统实现-优快云博客

本文介绍了一个基于JavaScript的星级评分系统实现细节，包括星星状态切换、动态提示信息展示及通过Ajax技术进行后台评分处理等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

String.prototype.inc = function(k1, k2){
    return k2 == null ? this.indexOf(k1) > -1 ? true : false : (k2 + this + k2) .indexOf(k2 + k1 + k2) > -1 ? true : false;
};
var is_IE5 = navigator.userAgent.inc("IE 5") || navigator.userAgent.inc("IE 6");
//定义星星：分别是blank(空白)，over(鼠标移上去),selected（被选择）
var STAR_IMG = new Array("o.gif", "o.gif", "s.gif");
//定义旁边的标签文字
var STAR_HINT = new Array("20分", "40分", "60分", "80分", "100分");
//用于取得对象
function oo(obj) {
    return typeof(obj) != "string" ? obj : (is_IE5 ? document.all(obj) : document.getElementById(obj));
}

//星星初始化
function initChgStar(ipt, hint) {
   document.write(\\( onMouseOut="clearStar(\'' + ipt +'\', \'' + hint +'\')">));
    for(var i = 0; i < 5; i++) {
    document.write(\\+'\', ' + (i+1) + ', \'' + hint +'\')" align="absmiddle" style="cursor:hand" onClick="choStar(\'' + ipt +'\', ' + (i+1) + ', \'' + hint +'\')"/>');
    }

    document.write(\\' id="'+hint +'">'); }

//鼠标移动上去，改变星星
function chgStar(ipt, num, hint) {
    if(num <= 5) {
    for(var i=0;i     oo('star_' + i + ipt).src = 'images/' + STAR_IMG[2] ;
    }
    for(i;i<5;i++) {
    oo('star_' + i + ipt).src = 'images/' + STAR_IMG[0] ;
    }
    }
    oo(hint).innerHTML = shwStarHint(num); //右侧显示hint信息
}

//鼠标点击，改变星星

var req;
function choStar(ipt, num, hint) {

  var article = document.getElementById("article");
        var url = "grade.do?result="+num+"&articleId="+article.value;

         if (window.XMLHttpRequest) {
             req = new XMLHttpRequest();
         }else if (window.ActiveXObject) {
             req = new ActiveXObject("Microsoft.XMLHTTP");
         }

        if(req){
            req.open("post", url, true);
            req.onreadystatechange = callback;
            req.send(null);
         }

   if(num <= 5) {
   for(var i=0;i     oo('star_' + i + ipt).src = 'images/' + STAR_IMG[2] ;
}
   for(i;i<5;i++) {
    oo('star_' + i + ipt).src = 'images/' + STAR_IMG[0] ;
    }
}
   oo(ipt).value = num;
   oo(hint).innerHTML = shwStarHint1(num); //右侧显示hint信息
        }


function callback() {
    if (req.readyState == 4) {
        if (req.status == 200) {
                 parseMessage();
        }else{
            alert ("Not able to retrieve description" + req.statusText);
        }
    }
   }
    var node1;
   function parseMessage() {
    var xmlDoc = req.responseXML.documentElement;
    var node = xmlDoc.getElementsByTagName('info');
    node1 = xmlDoc.getElementsByTagName('value');

   alert(node[0].firstChild.nodeValue);
// alert(node1[0].firstChild.nodeValue);
   }

function ready(ipt,hint){
  var article = document.getElementById("article");
        var url = "grade.do?result="+0+"&articleId="+article.value;

         if (window.XMLHttpRequest) {
             req = new XMLHttpRequest();
         }else if (window.ActiveXObject) {
             req = new ActiveXObject("Microsoft.XMLHTTP");
         }

        if(req){
            req.open("post", url, true);
            req.onreadystatechange = callback1;
            req.send(null);
         }
    oo(ipt).value = 0;
   //oo(hint).innerHTML = shwStarHint1(num); //右侧显示hint信息
}
function callback1() {
    if (req.readyState == 4) {
        if (req.status == 200) {
                 parseMessage1();
        }else{
            alert ("Not able to retrieve description" + req.statusText);
        }
    }
   }

//用于显示hint
function shwStarHint(num) {
num = num <= 0 ? 0 : num - 1;
return STAR_HINT[num];
}
function shwStarHint1(num) {
return node1[0].firstChild.nodeValue;
}

jsp:

<%@ page contentType="text/html; charset=UTF-8" %>
<%@taglib uri="/WEB-INF/c.tld" prefix="c"%>
<%--<%@taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>--%>

\\<IMG id=star_0id_point onmouseover="chgStar('id_point', 1, 'shw_app');" style="CURSOR: hand" onclick="choStar('id_point', 1, 'shw_app');" src="images/o.gif" align=absMiddle border=0 >
\\<IMG id=star_1id_point onmouseover="chgStar('id_point', 2, 'shw_app');" style="CURSOR: hand" onclick="choStar('id_point', 2, 'shw_app');" src="images/o.gif" align=absMiddle border=0>
\\<IMG id=star_2id_point onmouseover="chgStar('id_point', 3, 'shw_app');" style="CURSOR: hand" onclick="choStar('id_point', 3, 'shw_app');" src="images/o.gif" align=absMiddle border=0>
\\<IMG id=star_3id_point onmouseover="chgStar('id_point', 4, 'shw_app');" style="CURSOR: hand" onclick="choStar('id_point', 4, 'shw_app');" src="images/o.gif" align=absMiddle border=0>
\\<IMG id=star_4id_point onmouseover="chgStar('id_point', 5, 'shw_app');" style="CURSOR: hand" onclick="choStar('id_point', 5, 'shw_app');" src="images/o.gif" align=absMiddle border=0>

\\</SPAN>
\\ <SPAN id=shw_app></SPAN>
\\</td></tr>
\\<tr><td >
\\<textarea name="article" id="article">5</textarea>
\\</td></tr>
\\</table>
\\</body>