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);
}
}
}
function parseMessage1() {
var xmlDoc = req.responseXML.documentElement;
var node = xmlDoc.getElementsByTagName('info');
var node2 = xmlDoc.getElementsByTagName('value');
// alert(node[0].firstChild.nodeValue);
// alert(node2[0].firstChild.nodeValue);
STAR_HINT.push(node2[0].firstChild.nodeValue);//动态在数组最后添加元素
oo('shw_app').innerHTML = shwStarHint(6);//右侧显示hint信息
}
//清除星星
function clearStar(ipt, hint)
{
var num = oo(ipt).value ;
if(num == "") num = 0;
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] ;
}
}
if (num == 0) oo(hint).innerHTML = "";
else oo(hint).innerHTML = shwStarHint1(num);
}
//用于显示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"%>--%>
<script language="javascript" src="/spring-crud/js/grade.js"></script>
\\<body onload = "ready('id_point','shw_app');">
\\<INPUT id=id_point type=hidden name=point>
\\<table><tr><td>
\\<SPAN onmouseout="clearStar('id_point','shw_app');">
\\<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>
<script language="javascript" src="/spring-crud/js/grade.js"></script>
<script language="javascript" src="/spring-crud/js/grade.js"></script>