为另外简洁,我在页面只放了个html隐藏字段控件和一个表格及三个html文本框
页面代码如下:
<%@ Page language="c#" Codebehind="test.aspx.cs" AutoEventWireup="false" Inherits="LoginTest.test" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>test</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="
http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="100%" align="center" border="1"
height="100%">
<TR>
<TD align="right"><INPUT οnkeypress="check(this)"
οnmοuseοver="cc(this)" οnmοuseοut="out()" size="4" value="0" name="T">
<INPUT type="hidden" value="50" name="zongfen"><!--放一个隐藏字段已得到总分-->
</TD>
</TR>
<TR>
<TD align="right"><INPUT οnkeypress="check(this)"
οnmοuseοver="cc(this)" οnmοuseοut="out()" size="4" value="0" name="T"></TD>
</TR>
<TR>
<TD align="right"><INPUT οnkeypress="check(this)"
οnmοuseοver="cc(this)" οnmοuseοut="out()" size="4" value="0" name="T"></TD>
</TR>
</TABLE>
</form>
<!--放一个提示层,当鼠标移动到文本字段的时候他就出现,开始的时候他是隐藏的-->
<div id="pop" style="FONT-SIZE: 12px; BACKGROUND: #ffff00;position:absolute;width:120px;display:none"></div>
<script language=javascript>
//得到提示层
var cen = document.getElementById("pop");
//一和fenn函数,他能够遍历所有给分的文本框而得到还可以给多少分的值,并且确定提示层的背景色
function fen()
{
//首先从隐藏字段得到总分,后面的参数10代表10进制
var zong = parseInt(document.all.zongfen.value,10);
//得到所有给分的文本框
var a = document.getElementsByName("T");
//定义一个变量已经给了多少分,赋初值0
var gei = 0;
//遍历所有的给分文本框,得到已经给了多少分
for(var i = 0;i<a.length;i++)
{
//如果文本框没有任何东西就返回gei
gei = (a[i].value=="") ? gei : (gei + parseInt(a[i].value,10));
}
//根据总分和已经给了多少分来计算还可以给多少分
var n = zong - gei;
//如果还可以给的分小于0也就是多给了分的时候让提示层的背景变成红色
cen.style.background = (n<0) ? "#ff0000" : "#ffff00";
//设定提示层的内容
cen.innerText = "该问题总分值:" + zong + "/r/n还可以给的分:" + n;
}
//cc函数,当鼠标移动到给分框的时候执行这个函数
function cc(e)
{
if(e.name!="T")return;//如果文本框的name不是T也就是给分框,就返回
//e.focus();因为下面的语句 让给分框的内容全部选择当然同时也得到了焦点所以此话省略
e.select();//让给分框的内容全部处于选择状态
//调用fen函数取得给分结果和提示层的内容
fen();
var ttop = e.offsetTop;//取得当前给分框的上面偏移量,当然这里是相对与单元格的,因为他是放到了单元格里面
var tleft = e.offsetLeft;//取得当前给分框的左边偏移量,当然这里是相对与单元格的,因为他是放到了单元格里面
var h = e.clientHeight;//取得给分框的高度
var w = e.clientWidth;//取得给分框的宽度
//下面的e参数已经不是传入的那个e参数了,取得给分框的父容器的偏移量也就是td的偏移量
while (e = e.offsetParent){ttop += e.offsetTop; tleft += e.offsetLeft;}
//把提示层div显示出来
cen.style.display = "";
//确定提示层上边的位置
cen.style.top = ttop + h + 5;//因为文本框有厚度所以加上5以免他遮住给分框
//确定提示层左边的位置
cen.style.left = tleft - cen.clientWidth + w;//减去提示层的宽度再加上文本框的宽度让提示层正好在给分框的下边
}
//当鼠标移开给分框的时候执行out函数,提示层消失
function out()
{
cen.style.display = "none";
}
//当你在给分框中输入的时候如果不是数字则弹出警告框不容许输入
function check(e)
{
var key = window.event.keyCode;
if(key<48 || key>57)
{
alert("只能够输入数字!");
window.event.keyCode = 0;
}
}
</script>
</body>
</HTML>
