rl.txt

ASP程序实现的酒店预定系统

http://lucky.myrice.com/javascriptexam/index.html



自动日期选择


请选择日期： DIV (DHTML方式)  弹出窗口方式 

日期:  [ 弹出选择框 ] 

<< 三月 2003 >> 
日 一 二 三 四 五 六 
 
23 24 25 26 27 28 1 
2 3 4 5 6 7 8 
9 10 11 12 13 14 15 
16 17 18 19 20 21 22 
23 24 25 26 27 28 29 
30 31 1 2 3 4 5 
 
 
 
 
代码如下：
<STYLE>
#calendar {
	LEFT: 50px; VISIBILITY: hidden; POSITION: absolute; TOP: 50px; BACKGROUND-COLOR
: white
}
TD.cal {
	FONT-SIZE: 8pt; FONT-FAMILY: arial
}
TD.calmonth {
	FONT-SIZE: 8pt; FONT-FAMILY: arial; TEXT-ALIGN: right
}
TD.caltoday {
	BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 8pt; BORDER-LEFT-COLO
R: #800000; 
	BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: #800000; COLOR: white; BORDER-TO
P-COLOR: #800000;
	 FONT-FAMILY: arial; BACKGROUND-COLOR: #c0c0c0; TEXT-ALIGN: right; BORDER-RIGHT
-WIDTH: 1px; 
	 BORDER-RIGHT-COLOR: #800000; border-type: solid
}
INPUT.caltoday {
	FONT-SIZE: 8pt; WIDTH: 47px; FONT-FAMILY: arial; HEIGHT: 20px
}
A.cal {
	COLOR: #000000; TEXT-DECORATION: none
}
A.calthismonth {
	COLOR: #000000; TEXT-DECORATION: none
}
A.calothermonth {
	COLOR: #808080; TEXT-DECORATION: none
}
</STYLE>

<SCRIPT language=JavaScript>
var use_css=false;
var use_layers=false;   
if (document.all)    { use_css    = true; }
if (document.layers) { use_layers = true; }

var CALWINDOW;

// Write out default styles to document or return string
function writestyles(doc) {
	var result = "";
	result += "<STYLE>\n";
	result += "TD.cal { font-family:arial; font-size: 8pt; }\n";
	result += "TD.calmonth { font-family:arial; font-size: 8pt; text-align: right;}
\n";
	result += "TD.caltoday { font-family:arial; font-size: 8pt; text-align: right; 
color: white; 
	background-color:#C0C0C0; border-width:1; border-type:solid; border-color:#8000
00; }\n";
	result += "INPUT.caltoday { font-family:arial; font-size: 8pt; width:47px; heig
ht: 20px; }\n";
	result += "A.cal { text-decoration:none; color:#000000; }\n";
	result += "A.calthismonth { text-decoration:none; color:#000000; }\n";
	result += "A.calothermonth { text-decoration:none; color:#808080; }\n";
	result += "</STYLE>\n";
	if (doc != "") {
		doc.write(result);
		}
	else {
		return result;
		}
	}
writestyles(this.document);

function getOffsetLeft (el) {
	var scrollamount = document.body.scrollLeft;
	var ol = el.offsetLeft;
	while ((el = el.offsetParent) != null) { ol += el.offsetLeft; }
	ol = ol - scrollamount;
	return ol;
	}
function getOffsetTop (el) {
	var scrollamount = document.body.scrollTop;
	var ot = el.offsetTop;
	while((el = el.offsetParent) != null) { ot += el.offsetTop; }
	ot = ot - scrollamount;
	return ot;
	}
function showCalendar(divname, anchorname, functionname) {
	// Find position relative to anchor
	if (use_css) {
		var x = getOffsetLeft(document.all[anchorname]);
		var y = getOffsetTop(document.all[anchorname]);
		}
	else if (use_layers) {
		var found=0;
		for (var i=0; i<document.anchors.length; i++) {
			if (document.anchors[i].name == anchorname) {
				found=1;
				break;
				}
			}
		if (found == 0) {
			return;
			}
		var x = document.anchors[i].x;
		var y = document.anchors[i].y;
		x=x-window.pageXOffset;
		y=y-window.pageYOffset;
		}
	else {
		return;
		}
	x = x-152;
	y = y+25;
	// WRITE CALENDAR TO DIV
	if (divname != "") {
		// Position the calendar DIV
		if (use_layers) { var calendardiv = document.layers[divname]; }
		if (use_css)    { var calendardiv = document.all[divname].style; }
		calendardiv.left = x;
		calendardiv.top  = y;
		// Write output to calendar DIV
		if (arguments.length>4) { 
			outputCalendar(divname,functionname,arguments[3],arguments[4]);
			}
		else {
			outputCalendar(divname,functionname);
			}
		// Show the calendar DIV
		calendardiv.visibility = "visible";
		}
	// WRITE CALENDAR TO POPUP WINDOW
	else {
		if (use_layers) {
			var windowx = window.screenX;
			var windowy = window.screenY + (window.outerHeight-24-window.innerHeight);
			}
		if (use_css) {
			var windowx = window.screenLeft;
			var windowy = window.screenTop;
			}
		x = x + windowx;
		y = y + windowy;
		if (!CALWINDOW || CALWINDOW.closed) {
			CALWINDOW = window.open("about:blank","calwindow",
			"status,width=150,height=175,screenX="+x+",left="+x+",screenY="+y+",
			top="+y+",resizable");
			}
		// Write output to popup window
		if (arguments.length>4) { 
			outputCalendar(divname,functionname,arguments[3],arguments[4]);
			}
		else {
			outputCalendar(divname,functionname);
			}
		}
	}

function hideCalendar(divname) {
	if (divname != "") {
		if (use_layers) { var calendardiv = document.layers[divname]; }
		if (use_css)    { var calendardiv = document.all[divname].style; }
		calendardiv.visibility = "hidden";
		}
	else {
		if (CALWINDOW && !CALWINDOW.closed) {
			CALWINDOW.close();
			}
		}
	}
	
function outputCalendar(divname, functionname) {
	var now = new Date();
	if (arguments.length > 2) { var month = arguments[2]; }
		else { var month = now.getMonth()+1; }
	if (arguments.length > 3) { var year = arguments[3]; }
		else { var year = now.getFullYear(); }
	var monthnames = new Array('一月','二月','三月','四月','五月','六月','七月',
	'八月','九月','十月','十一月','十二月');
	var daysinmonth= new Array(0,31,28,31,30,31,30,31,31,30,31,30,31);

	if ( ( (year%4 == 0)&&(year%100 != 0) ) || (year%400 == 0) ) { // leap year
		daysinmonth[2] = 29;
		}
	var current_month = new Date(year,month-1,1);
	
	var display_year = year;
	var display_month = month;
	var display_date = 1;

	var offset = 0;
	var weekday= current_month.getDay();
	if (weekday > 0) {
		display_month--;
		if (display_month < 1) { display_month = 12; display_year--; }
		display_date = daysinmonth[display_month]-weekday+1;
		}
	var next_month = month+1;
	var next_month_year = year;
	if (next_month > 12) { next_month=1; next_month_year++; }
	var last_month = month-1;
	var last_month_year = year;
	if (last_month < 1) { last_month=12; last_month_year--; }
	
	var date_class;
	var result = "";
	if (divname == "" ) {
		var windowref = "window.opener.";
		}
	else {
		var windowref = "";
		}
	// If POPUP, write entire HTML document
	if (divname == "") {
		result += "<HTML><HEAD>"+writestyles('')+"<BODY MARGINWIDTH=0 MARGINHEIGHT=0 T
OPMARGIN=0 
		RIGHTMARGIN=0 LEFTMARGIN=0>";
		}
	result += '<FORM>';
	if (divname != "") {
		result += '<TABLE WIDTH=144 BORDER=1 BORDERWIDTH=1 BORDERCOLOR="#808080" CELLS
PACING=0 CELLPADDING=1>';
		result += '<TR><TD ALIGN=CENTER>';
		result += '<CENTER>';
		result += '<TABLE WIDTH=144 BORDER=0 BORDERWIDTH=0 CELLSPACING=0 CELLPADDING=0
>';
		}
	else {
		result += '<CENTER><TABLE WIDTH=100% BORDER=0 BORDERWIDTH=0 CELLSPACING=0 CELL
PADDING=0>';
		}
	result += '<TR BGCOLOR="#ff3366">';
	result += '	<TD CLASS="cal" WIDTH=22 ALIGN=CENTER VALIGN=MIDDLE><B>
	<A CLASS="cal" HREF="javascript:'+windowref+
	'outputCalendar(\''+divname+'\',\''+functionname+'\','+last_month+','+last_mont
h_year+')">
	&lt;&lt;</A></B></TD>';
	result += '	<TD CLASS="cal" WIDTH=100 ALIGN=CENTER>'+monthnames[month-1]+' '+ye
ar+'</TD>';
	result += '	<TD CLASS="cal" WIDTH=22 ALIGN=CENTER VALIGN=MIDDLE><B>
	<A CLASS="cal" HREF="javascript:'+windowref+'outputCalendar(\''+divname+'\',\''
	+functionname+'\','+next_month+','+next_month_year+')"
	>&gt;&gt;</A></B></TD>';
	result += '</TR>';
	result += '</TABLE>';
	result += '<TABLE WIDTH=120 BORDER=0 CELLSPACING=1 CELLPADDING=0 ALIGN=CENTER>'
;
	result += '<TR>';
	result += '	<TD CLASS="cal" ALIGN=RIGHT WIDTH=14%>日</TD>';
	result += '	<TD CLASS="cal" ALIGN=RIGHT WIDTH=14%>一</TD>';
	result += '	<TD CLASS="cal" ALIGN=RIGHT WIDTH=14%>二</TD>';
	result += '	<TD CLASS="cal" ALIGN=RIGHT WIDTH=14%>三</TD>';
	result += '	<TD CLASS="cal" ALIGN=RIGHT WIDTH=14%>四</TD>';
	result += '	<TD CLASS="cal" ALIGN=RIGHT WIDTH=14%>五</TD>';
	result += '	<TD CLASS="cal" ALIGN=RIGHT WIDTH=14%>六</TD>';
	result += '</TR>';
	result += '<TR><TD COLSPAN=7 ALIGN=CENTER><IMG SRC="graypixel.gif" WIDTH=120 HE
IGHT=1></TD></TR>';
	for (var row=1; row<=6; row++) {
		result += '<TR>';
		for (var col=1; col<=7; col++) {
			if (display_month == month) {
				date_class = "calthismonth";
				}
			else {
				date_class = "calothermonth";
				}
			if ((display_month == now.getMonth()+1) && 
			(display_date==now.getDate()) && (display_year==now.getFullYear())) {
				td_class="caltoday";
				}
			else {
				td_class="calmonth";
				}
			result += '	<TD CLASS="'+td_class+'">
			<A HREF="javascript:'+windowref+functionname+'('+display_year+','+
			display_month+','+display_date+');'
			+windowref+'hideCalendar(\''+divname+'\');" CLASS="'+date_class+'">'+
			display_date+'</A></TD>';
			display_date++;
			if (display_date > daysinmonth[display_month]) {
				display_date=1;
				display_month++;
				}
			if (display_month > 12) {
				display_month=1;
				display_year++;
				}
			}
		result += '</TR>';
		}
	result += '<TR><TD COLSPAN=7 ALIGN=CENTER><IMG SRC="graypixel.gif" WIDTH=120 HE
IGHT=1></TD></TR>';
	result += '<TR>';
	result += '	<TD COLSPAN=7 ALIGN=CENTER>';
	result += '		<INPUT CLASS="caltoday" TYPE="button" 
	VALUE="Today" onClick="'+windowref+functionname+'(\''+now.getFullYear()+'\',
	\''+(now.getMonth()+1)+'\',\''+now.getDate()+'\');'
	+windowref+'hideCalendar(\''+divname+'\');">';
	result += '		<BR>';
	result += '	</TD>';
	result += '</TR>';
	result += '</TABLE>';
	result += '</CENTER>';
	result += '</TD></TR>';
	result += '</TABLE>';
	result += '</FORM>';
	if (divname == "") {
		result += "</BODY></HTML>";
		}

	if (divname != "") {	
		if (use_css) {
			document.all[divname].innerHTML = result;
			}
		if (use_layers) {
			var thedoc = document.layers[divname].document;
			thedoc.open;
			thedoc.write(result);
			thedoc.close();
			}
		}
	else {
		CALWINDOW.document.open();
		CALWINDOW.document.write(result);
		CALWINDOW.document.close();
		}
	}



</SCRIPT>

<SCRIPT language=JavaScript>
function showdate( year, month, date ){

var a = new Array('','一月','二月','三月','四月','五月','六月','七月','八月','九
月','十月','十一月','十二月');
month = a[month];
document.forms[0].date1.value = ""+year+"年"+month+date+"日";
hideCalendar('calendar');
}
function clicklink() {
if (document.forms[0].caltype[0].checked) {
showCalendar('calendar','calposition1','showdate');

}
else {

showCalendar('','calposition1','showdate');
}
}
</SCRIPT>
<FORM>请选择日期：<INPUT type=radio CHECKED name=caltype> 
<B>DIV</B> (DHTML方式) <INPUT type=radio name=caltype> <B>弹出窗口方式</B> <BR><
BR>日期: 
<INPUT name=date1><A name=calposition1> </A>[ <A 
href="javascript:clicklink()">弹出选择框</A> ] <BR></FORM>
<DIV id=calendar></DIV>



 

 

--------------------------------------------------------------------------------
  &copy;【孟宪会之精彩世界】&reg;由孟宪会制作 1999-2003年  


新世纪1:1广告交换 - 站点排名 - 免费申请 
=============================================================
网易俱乐部为你建造一个超级的私人社区！		http://our.163.com
情人节不要再做孤独人！约会其实很简单		http://dating.163.com/
玫瑰、巧克力、和情侣铂金钻戒！			http://vip.163.com/lover/new_love.jsp