⭐ 欢迎来到虫虫下载站! | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站

📄 index.jsp~68~

📁 css+Ajax技术实现学员分数查看的功能
💻 JSP~68~
字号:
<%@page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage=""%>
<%@page import="java.util.*"%>
<%@page import="com.accp.teem.server.action.*"%>
<%@page import="com.accp.teem.server.entity.*"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>学生成绩公布</title>
<script language="JavaScript" type="text/JavaScript">
<!--
	var obj = function(objid)
	{
		if (document.getElementById)
		{
			return eval("document.getElementById('"+objid+"')");
		}
		else if (document.all)
		{
			return eval("document.all"+objid);
		}
		return null;
	}

	function ShowHide(sid,flag)
	{
		var score = obj(sid);

		if (score == null)
		{
			alert("程序出错,无法获取指定元素!");
			return;
		}

		if (!flag)
		{
			score.style.display="none";
		}
		else
		{
			score.style.position = "absolute";
			score.style.left = mousePos.x - 80; //鼠标目前在X轴上的位置,加10是为了向右边移动10个px方便看到内容
			score.style.top = mousePos.y ;
			score.style.display = "block"; //score初始状态是不可见的,设置可为可见
		}
	}

	var mousePos;

	function mousePosition(ev)
	{
		if(ev.pageX || ev.pageY)
		{
			return {x:ev.pageX, y:ev.pageY};
		}
		return{
			x:ev.clientX  + document.body.scrollLeft - document.body.clientLeft,
			y:ev.clientY  + document.body.scrollLeft - document.body.clientLeft
		};
	}
//-->
</script><!--AJAX-->
<script type="text/javascript" language="javascript">

    var http_request = false;

	function makeRequest(sid)
	{

	  var score = obj(sid);
	  if (score == null)
	  {
		alert("程序出错,无法获取指定元素!");
		return;
	  }

	  mousePos = mousePosition(event);

	  http_request = false;

	  if (window.XMLHttpRequest) // Mozilla, Safari,...
	  {
		http_request = new XMLHttpRequest();
		if(http_request.overrideMimeType)
		{
		  http_request.overrideMimeType('text/xml');
		}
	  }
	  else if (window.ActiveXObject)//IE
	  {
		 try
		 {
		   http_request = new ActiveXObject("Msxml2.XMLHTTP");
		 }
		 catch (e)
		 {
		   try
		   {
			 http_request = new ActiveXObject("Microsoft.XMLHTTP");
		   }
		   catch (e)
		   {
		   }
		  }
		}
		if (!http_request)//创建XMLHTTP实例不成功
		{
		  alert('创建XMLHTTP实例不成功');
		  return ;
		}

		var URL = "/ScoreModule/scoreservlet?scoreName="+score.innerHTML;
		http_request.onreadystatechange = alertContents;
		http_request.open('POST',URL, true);
		http_request.send(null);
   	}

	function alertContents()//此函数在服务器每个状态改变时都会触发这个事件
	{
	  if (http_request.readyState == 4) //服务交互完毕
	  {
		if (http_request.status == 200)
		{
			//处理服务器的响应
			var xmldoc= http_request.responseXML;
			var name = xmldoc.getElementsByTagName('name')[0].firstChild.data;
			var java = xmldoc.getElementsByTagName('java')[0].firstChild.data;
			var net = xmldoc.getElementsByTagName('net')[0].firstChild.data;
			var js = xmldoc.getElementsByTagName('js')[0].firstChild.data;

			//填写层内容
			obj("name").innerHTML=name;
			obj("java").innerHTML=java;
			obj("net").innerHTML=net;
			obj("js").innerHTML=js;

			//显示层
			ShowHide('score',true);

		}
		else
		{
			alert('操作请求发生错误!');
		}
	  }
	}
</script><style type="text/css">
  <!--
    table
    {
    font-family: "宋体";
    font-size: 12px;
    }
    .nifty{ margin: 0 10%;background: #9BD1FA}
    b.rtop, b.rbottom{display:block;background: #FFF}
    b.rtop b, b.rbottom b{display:block;height: 1px;
    overflow: hidden; background: #9BD1FA}
    b.r1{margin: 0 5px}
    b.r2{margin: 0 3px}
    b.r3{margin: 0 2px}
    b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
  -->
</style>
</head>
<body>
<div class="nifty" id="score" style="display:none;width:157px; height:85px; " onMouseOut="ShowHide('score',false)">
  <b class="rtop">
    <b class="r1">    </b>
    <b class="r2">    </b>
    <b class="r3">    </b>
    <b class="r4">    </b>
  </b>
  <!--<div id="T001" class="article">-->
  <center>
    <table width="100%" height="100%" border="0">
      <tr>
        <td>姓名</td>
        <td>
          <span id="name">&nbsp;</span>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <hr width="80%">
        </td>
      </tr>
      <tr>
        <td>JAVA</td>
        <td>
          <span id="java">&nbsp;</span>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <hr width="80%">
        </td>
      </tr>
      <tr>
        <td>NET</td>
        <td>
          <span id="net">&nbsp;</span>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <hr width="80%">
        </td>
      </tr>
      <tr>
        <td>JS</td>
        <td>
          <span id="js">&nbsp;</span>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <hr width="80%">
        </td>
      </tr>
    </table>
    <b class="rbottom">
      <b class="r4">      </b>
      <b class="r3">      </b>
      <b class="r2">      </b>
      <b class="r1">      </b>
    </b>

</div>
<h2>北大青鸟S2T68考试成绩公布</h2>
<%
  out.println("<table width=\"298\" height=\"195\" cellspacing=\"1\" cellpadding=\"0\" bgcolor=\"#000000\">");
  out.println("<tr bgcolor=\"#FFFFFF\">");
  out.println("<th width=\"141\" bgcolor=\"#FFFFFF\">班级</th>");
  out.println("<th width=\"141\" bgcolor=\"#FFFFFF\">姓名</th>");
  out.println("</tr>");
  List sList = Business.seletAllStudent();
  String id = null;
  for (int i = 0; i < sList.size(); i++) {
    Score score = (Score) sList.get(i);
    id = "T" + new Integer(i).toString();
    out.println("<tr bgcolor=\"#FFFFFF\">");
    out.println("<td bgcolor=\"#FFFFFF\">S2T68</td>");
    out.println("<td bgcolor=\"#FFFFFF\"><span  id=\"" + id + "\" onMouseOver=\"makeRequest('" + id + "')\" onMouseOut=\"ShowHide('score',false)\"  style=\"cursor:hand\">" + score.getName() + "</span></td>");
    out.println("</tr>");
  }
  out.println("</table>");
%>
<p>将鼠标移到姓名上会显示相应的详细信息</p>
</center></body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -