实现怀孕测试的代码。
html代码如下
<table width="388" align="center" style="padding-bottom:4px;">
<form id=frmInput name=frmInput onsubmit="return DisplayCalendar()" action=# method=post>
<TBODY>
<TR>
<TD class=nine-pt vAlign=center align=center width=388>
<TABLE width=412 border=0 align="center" cellPadding=0 cellSpacing=0>
<TBODY>
<TR>
<TD width=5 height=26></TD>
<TD height=26 colSpan=4 valign="bottom"><div align="center" class="STYLE3">排卵与安全期自测</div></TD></TR>
<TR>
<TD width=5 height=38></TD>
<TD colSpan=4 height=38><div align="center" class="STYLE4"><FONT size=2><B>上次月经时间</B>
<INPUT class=inputform maxLength=4 size=4 name='txtYear' id='txtYear'/>
<B>年</B>
<INPUT class=inputform maxLength=2 size=4 name='txtMonth' id='txtMonth'/>
<B>月</B>
<INPUT class=inputform maxLength=2 size=4 name='txtDay' id='txtDay'/>
<B>日</B></FONT></div></TD></TR>
<TR>
<TD width=5 height=25></TD>
<TD colSpan=4 height=38><div align="center" class="STYLE4"><FONT size=2><B>最短月经周期</B>
<INPUT class=inputform
maxLength=2 size=4 value=28 name='txtMinMensesCyc' id='txtMinMensesCyc'>
<B>天 最长月经周期</B>
<INPUT class=inputform maxLength=2 size=4 value=28
name='txtMaxMensesCyc' id='txtMaxMensesCyc'>
<B>天</B></FONT></div></TD></TR>
<TR>
<TD width=5 height=14></TD>
<TD colSpan=4 height=14></TD></TR>
<TR>
<TD width=5 height=24></TD>
<TD colSpan=2 height=24>
<P align=center><FONT size=2><IMG style="CURSOR: pointer"
onclick=javascript:DisplayCalendar() height=20
src="template/$_SC[template]/images/jisuan.gif"
width=50> </FONT></P></TD>
<TD colSpan=2 height=24>
<P align=center><FONT size=2><IMG style="CURSOR: pointer"
onclick=javascript:document.frmInput.reset() height=20
src="template/$_SC[template]/images/chong.gif"
width=50> </FONT></P></TD></TR>
<TR>
<TD width=5 height=14></TD>
<TD colSpan=4 height=14></TD></TR>
<TR>
<TD width=5 height=93></TD>
<TD width=187 height=120>
<DIV align=center>
<CENTER>
<TABLE borderColor=#DD72BC cellSpacing=3 cellPadding=0 width=166
border=1>
<TBODY>
<TR>
<TD height=20>
<P align=center class="STYLE5"><FONT size=2>显示第1个月测试结果</FONT></P></TD></TR>
<TR>
<TD>
<TABLE id=Calendar1 cellSpacing=0 cellPadding=0 width=180 align=left border=0>
<TBODY>
<TR>
<TD height=120> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER></DIV></TD>
<TD colSpan=2 height=93></TD>
<TD width=208 height=120>
<DIV align=center>
<CENTER>
<TABLE borderColor=#C649A1 cellSpacing=3 cellPadding=0 width=166
border=1>
<TBODY>
<TR>
<TD height=20><span class="STYLE4"> <B><FONT
size=2>显示第2个月测试结果</FONT><FONT
size=2></FONT></B> </span></TD></TR>
<TR>
<TD>
<TABLE id=Calendar2 borderColor=#000000 cellSpacing=0
cellPadding=0 width=180 align=left border=0>
<TBODY>
<TR>
<TD height=120> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER></DIV></TD></TR>
<TR>
<TD width=5 height=16></TD>
<TD colSpan=4 height=16></TD></TR>
<TR>
<TD width=5 height=14></TD>
<TD colSpan=4 height=14>
<DIV align=center>
<TABLE height=16 cellSpacing=0 cellPadding=0 width=300 border=0>
<TBODY>
<TR>
<TD width=41 bgColor=#009933 height=16> </TD>
<TD width=51 height=16>
<P align=center><FONT size=2>安全期</FONT></P></TD>
<TD width=8 height=16></TD>
<TD width=39 bgColor=#ff0000 height=16> </TD>
<TD width=43 height=16>
<P align=center><FONT size=2>排卵期</FONT></P></TD>
<TD width=9 height=16></TD>
<TD width=41 bgColor=#e3e300 height=16> </TD>
<TD width=52 height=16>
<P align=center><FONT size=2>月经期</FONT></P></TD></TR></TBODY></TABLE></DIV></TD></TR>
</TBODY>
</Table>
</TD>
</TR>
</TBODY>
</form>
</table>
html代码如下
<table width="388" align="center" style="padding-bottom:4px;">
<form id=frmInput name=frmInput onsubmit="return DisplayCalendar()" action=# method=post>
<TBODY>
<TR>
<TD class=nine-pt vAlign=center align=center width=388>
<TABLE width=412 border=0 align="center" cellPadding=0 cellSpacing=0>
<TBODY>
<TR>
<TD width=5 height=26></TD>
<TD height=26 colSpan=4 valign="bottom"><div align="center" class="STYLE3">排卵与安全期自测</div></TD></TR>
<TR>
<TD width=5 height=38></TD>
<TD colSpan=4 height=38><div align="center" class="STYLE4"><FONT size=2><B>上次月经时间</B>
<INPUT class=inputform maxLength=4 size=4 name='txtYear' id='txtYear'/>
<B>年</B>
<INPUT class=inputform maxLength=2 size=4 name='txtMonth' id='txtMonth'/>
<B>月</B>
<INPUT class=inputform maxLength=2 size=4 name='txtDay' id='txtDay'/>
<B>日</B></FONT></div></TD></TR>
<TR>
<TD width=5 height=25></TD>
<TD colSpan=4 height=38><div align="center" class="STYLE4"><FONT size=2><B>最短月经周期</B>
<INPUT class=inputform
maxLength=2 size=4 value=28 name='txtMinMensesCyc' id='txtMinMensesCyc'>
<B>天 最长月经周期</B>
<INPUT class=inputform maxLength=2 size=4 value=28
name='txtMaxMensesCyc' id='txtMaxMensesCyc'>
<B>天</B></FONT></div></TD></TR>
<TR>
<TD width=5 height=14></TD>
<TD colSpan=4 height=14></TD></TR>
<TR>
<TD width=5 height=24></TD>
<TD colSpan=2 height=24>
<P align=center><FONT size=2><IMG style="CURSOR: pointer"
onclick=javascript:DisplayCalendar() height=20
src="template/$_SC[template]/images/jisuan.gif"
width=50> </FONT></P></TD>
<TD colSpan=2 height=24>
<P align=center><FONT size=2><IMG style="CURSOR: pointer"
onclick=javascript:document.frmInput.reset() height=20
src="template/$_SC[template]/images/chong.gif"
width=50> </FONT></P></TD></TR>
<TR>
<TD width=5 height=14></TD>
<TD colSpan=4 height=14></TD></TR>
<TR>
<TD width=5 height=93></TD>
<TD width=187 height=120>
<DIV align=center>
<CENTER>
<TABLE borderColor=#DD72BC cellSpacing=3 cellPadding=0 width=166
border=1>
<TBODY>
<TR>
<TD height=20>
<P align=center class="STYLE5"><FONT size=2>显示第1个月测试结果</FONT></P></TD></TR>
<TR>
<TD>
<TABLE id=Calendar1 cellSpacing=0 cellPadding=0 width=180 align=left border=0>
<TBODY>
<TR>
<TD height=120> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER></DIV></TD>
<TD colSpan=2 height=93></TD>
<TD width=208 height=120>
<DIV align=center>
<CENTER>
<TABLE borderColor=#C649A1 cellSpacing=3 cellPadding=0 width=166
border=1>
<TBODY>
<TR>
<TD height=20><span class="STYLE4"> <B><FONT
size=2>显示第2个月测试结果</FONT><FONT
size=2></FONT></B> </span></TD></TR>
<TR>
<TD>
<TABLE id=Calendar2 borderColor=#000000 cellSpacing=0
cellPadding=0 width=180 align=left border=0>
<TBODY>
<TR>
<TD height=120> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER></DIV></TD></TR>
<TR>
<TD width=5 height=16></TD>
<TD colSpan=4 height=16></TD></TR>
<TR>
<TD width=5 height=14></TD>
<TD colSpan=4 height=14>
<DIV align=center>
<TABLE height=16 cellSpacing=0 cellPadding=0 width=300 border=0>
<TBODY>
<TR>
<TD width=41 bgColor=#009933 height=16> </TD>
<TD width=51 height=16>
<P align=center><FONT size=2>安全期</FONT></P></TD>
<TD width=8 height=16></TD>
<TD width=39 bgColor=#ff0000 height=16> </TD>
<TD width=43 height=16>
<P align=center><FONT size=2>排卵期</FONT></P></TD>
<TD width=9 height=16></TD>
<TD width=41 bgColor=#e3e300 height=16> </TD>
<TD width=52 height=16>
<P align=center><FONT size=2>月经期</FONT></P></TD></TR></TBODY></TABLE></DIV></TD></TR>
</TBODY>
</Table>
</TD>
</TR>
</TBODY>
</form>
</table>
JAVASCRIPT代码
function showtip2(current,e,text,index){
if (document.all&&document.readyState=="complete"){
eval("var tooltip=document.all.tooltip" + index + ";")
//tooltip.innerHTML='<marquee style="border:1px solid black">'+text+'</marquee>'
tooltip.innerHTML='' + text + '</TABLE>'
tooltip.style.pixelLeft=event.x-195
tooltip.style.pixelTop=event.y-130
tooltip.style.visibility="visible"
}
else if (document.layers){
eval("var tooltip=document.tooltip" + index + ";")
eval("var nstip=document.tooltip" + index + ".document.nstip" + index + ";")
nstip.document.write('<b>'+text+'</b>')
nstip.document.close()
nstip.left=0
//currentscroll=setInterval("scrolltip(" + index + ")",100)
tooltip.left=event.x-195
tooltip.top=event.y-130
tooltip.visibility="show"
}
}function hidetip2(index){
if (document.all)
eval("document.all.tooltip" + index + ".style.visibility='hidden';");
else if (document.layers){
//clearInterval(currentscroll)
eval("document.tooltip" + index + ".visibility='hidden';")
}
}function scrolltip(index){
eval("var nstip=document.tooltip" + index + ".document.nstip" + index + ";")
if (nstip.left>=-nstip.document.width)
nstip.left-=5
else
nstip.left=150
}function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11)
{
this[0] = m0;
this[1] = m1;
this[2] = m2;
this[3] = m3;
this[4] = m4;
this[5] = m5;
this[6] = m6;
this[7] = m7;
this[8] = m8;
this[9] = m9;
this[10] = m10;
this[11] = m11;
}var CalendarOuterHTML = '';
var Today = new Date();
var DaysPerMonth = 0;//Get the number of day in some month
function GetDayPerMonth(year,month)
{
var monthDays = new montharr(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0))
monthDays[1] = 29;
DaysPerMonth = monthDays[month];
}function GetCalendarOuterHTML(CalendarIndex,HaveLayer)
{
CalendarOuterHTML = '';
var thisYear = frmInput.txtYear.value;
var thisMonth = parseInt(frmInput.txtMonth.value) + CalendarIndex - 1 ;
//when thisMonth beyond 12
if (thisMonth > 12)
{
thisYear = parseInt(thisYear) + 1;
thisMonth = thisMonth % 12;
} //title of the calendar
CalendarOuterHTML = CalendarOuterHTML + "<table border=0 width=180 height=120 cellspacing=0 cellpadding=3 align=right id=Calendar" + CalendarIndex + ">";
CalendarOuterHTML = CalendarOuterHTML + "<TR bgcolor=#84C1FF><TD colspan=7 class=nine-pt height=15 align=center>";
CalendarOuterHTML = CalendarOuterHTML + thisYear+' 年 ';
CalendarOuterHTML = CalendarOuterHTML + thisMonth +' 月';
CalendarOuterHTML = CalendarOuterHTML + "<TR bgcolor=#CAE4FF><TD width=18 class=nine-pt>日<TD width=18 class=nine-pt>一<TD width=18 class=nine-pt>二<TD width=18 class=nine-pt>三<TD width=18 class=nine-pt>四<TD width=18 class=nine-pt>五<TD width=18 class=nine-pt>六";
CalendarOuterHTML = CalendarOuterHTML + "<TR bgcolor=#FFFFFF>"; //Get the day of the first Day
var firstDay = new Date(Date.UTC(frmInput.txtYear.value,(parseInt(frmInput.txtMonth.value)-2+CalendarIndex),1));
testMe = firstDay.getDate();
if (testMe == 2)
firstDay.setDate(0);
startDay = firstDay.getDay();
//display empty cells before the first day of the month
column = 0;
for (i=0; i<startDay; i++)
{
CalendarOuterHTML = CalendarOuterHTML + "<TD width=18 class=nine-pt>";
column++;
}
//display the grids in the calendar
var Lastday = new Date(Date.UTC(frmInput.txtYear.value,(parseInt(frmInput.txtMonth.value)-1),frmInput.txtDay.value))
GetDayPerMonth(thisYear,thisMonth-1)
for (i=1; i<=DaysPerMonth; i++)
{
CalendarOuterHTML = CalendarOuterHTML + "<TD width=18 class=nine-pt>";
var color = "blue"; //default color without layer displayed
//Get layer HTML
if (HaveLayer)
{
var ThisDay = new Date(Date.UTC(thisYear,thisMonth-1,i))
var msPerDay = 24 * 60 * 60 * 1000 ;
var mensesCyc = parseInt(frmInput.txtMinMensesCyc.value); //Min menses Cycle
var msDiff = ThisDay.getTime() - Lastday.getTime();
dayDiff = Math.floor(msDiff / msPerDay); //get the days between thisday and lastday
dayRemainder = (dayDiff % mensesCyc + mensesCyc) % mensesCyc;
//if (i<2) {alert(ThisDay.toLocaleString()); alert(Lastday.toLocaleString()); alert(dayDiff);alert(dayRemainder);}
var tooltips =""; //content of layer
if (dayRemainder>=0 && dayRemainder<=4)
{ color = "#e3e300";
tooltips = "这是月经期,要注意经期卫生,当然也要“节欲”,避免性事哦!"
}
if (dayRemainder>=5 && dayRemainder<=(mensesCyc-20))
{ color = "#009933";
tooltips = "这是安全期,性事一般不会受孕,您放心吧!";
}
if (dayRemainder>=(mensesCyc-19) && dayRemainder<=(mensesCyc-10))
{ color = "#FF3300";
tooltips = "这是危险期,亦称排卵期,性事受孕可能性大,千万要注意哦!";
}
if (dayRemainder>=(mensesCyc-9) && dayRemainder<=(mensesCyc-1))
{ color = "#009933";
tooltips = "这是安全期,性事一般不会受孕,您放心吧!";
}
iLayerIndex = 40*CalendarIndex + i ; //index of layer tooltips = "<TABLE border=0 cellPadding=2 cellSpacing=1 width=100% align=center bgcolor=#008080>" +
"<TR><TD style=BACKGROUND-COLOR:white;COLOR:" + color + ";FONT-FAMILY:宋体;FONT-SIZE:9pt;TEXT-DECORATION:none> " +
tooltips + "</TD></TR></TABLE>";
CalendarOuterHTML = CalendarOuterHTML + "<div id=\"tooltip" + iLayerIndex + "\" style=\"position:absolute;visibility:hidden;clip:rect(0 150 150 0);width:150px;background-color:seashell\">";
CalendarOuterHTML = CalendarOuterHTML + "<layer name=\"nstip" + iLayerIndex + "\" width=\"1000px\" bgColor=\"seashell\" height=\"500px\"></layer></div>";
CalendarOuterHTML = CalendarOuterHTML + "<a href=\"#\" onMouseOver=\"showtip2(this,event,'" + tooltips + "'," + iLayerIndex + ")\" onMouseOut=\"hidetip2(" + iLayerIndex + ")\">";
}
CalendarOuterHTML = CalendarOuterHTML + "<FONT COLOR=\"" + color + "\">" + i + "</FONT>";
column++;
if (column == 7)
{
CalendarOuterHTML = CalendarOuterHTML + "<TR bgcolor=#FFFFFF>";
column = 0;
}
}
部分代码
//display empty cells after the final day of the month
var FinalDay = new Date(Date.UTC(frmInput.txtYear.value,(parseInt(frmInput.txtMonth.value)-2+CalendarIndex),DaysPerMonth));
testMe = FinalDay.getDate();
if (testMe == 2)
FinalDay.setDate(0);
EndDay = FinalDay.getDay();
for (i=EndDay; i<6; i++)
{
CalendarOuterHTML = CalendarOuterHTML + "<TD width=18 class=nine-pt>";
}
CalendarOuterHTML = CalendarOuterHTML + "</TABLE>";
}//to check input errors and display both calendars
function DisplayCalendar()
{
//check whether the date is legal
if (frmInput.txtYear.value<1900||isNaN(frmInput.txtYear.value))
{
alert("请输入合法年份!")
frmInput.txtYear.focus();
return false;
}
if (isNaN(frmInput.txtMonth.value) || frmInput.txtMonth.value<1 || frmInput.txtMonth.value>12)
{
alert("请输入合法月份!")
frmInput.txtMonth.focus();
return false;
}
GetDayPerMonth(frmInput.txtYear.value,frmInput.txtMonth.value-1)
if (isNaN(frmInput.txtDay.value) || frmInput.txtDay.value<1 || frmInput.txtDay.value>DaysPerMonth)
{
alert("请输入合法日期!")
frmInput.txtDay.focus();
return false;
}
var Lastday = new Date(Date.UTC(frmInput.txtYear.value,(parseInt(frmInput.txtMonth.value)-1),frmInput.txtDay.value))
if ((Today.getTime() - Lastday.getTime())<0)
{
alert("请输入正确的上次月经时间(不能早于当前时间)!")
frmInput.txtYear.focus();
return false;
}
//check input
if(isNaN(frmInput.txtMinMensesCyc.value))
{
alert("请输入数字!")
frmInput.txtMinMensesCyc.focus();
return false;
}
if(parseInt(frmInput.txtMinMensesCyc.value)>40 || parseInt(frmInput.txtMinMensesCyc.value)<22 )
{
alert("您输入的最短月经周期与标准月经周期相差太大,程序无法测试,请仔细核对。\n\n如输入确无问题请咨询医生!")
frmInput.txtMinMensesCyc.focus();
return false;
}
if(isNaN(frmInput.txtMaxMensesCyc.value) || parseInt(frmInput.txtMaxMensesCyc.value)<parseInt(frmInput.txtMinMensesCyc.value))
{
alert("输入错误,请仔细核对您的输入周期!");
frmInput.txtMaxMensesCyc.focus();
return false;
}
//display calendars
GetCalendarOuterHTML(1,1);
document.all.Calendar1.outerHTML = CalendarOuterHTML;
GetCalendarOuterHTML(2,1);
document.all.Calendar2.outerHTML = CalendarOuterHTML;
MM_showHideLayers('Layer1','','show');
}//Initialize
function InitialCalendar()
{
//Initialize the date input boxes
frmInput.txtYear.value = Today.getYear();
frmInput.txtMonth.value = Today.getMonth()+1;
frmInput.txtDay.value = Today.getDate();
//Initialize the calendars
GetCalendarOuterHTML(1,0);
document.all.Calendar1.outerHTML = CalendarOuterHTML;
GetCalendarOuterHTML(2,0);
document.all.Calendar2.outerHTML = CalendarOuterHTML;
//Set focus
frmInput.btnCalculate.focus();
}
在试试
document.getElementById("id").属性;
getElementById