Un calendario guionado muy bonito.

Autor：Eve Cole Fecha de actualización：2009-06-08 18:33:56

<Script LANGUAGE="JavaScript"> var meses = new Array("一", "二", "三","四", "五", "六", "七", "八", "九", "十", "十一", "十二"); var díasEnMes = nueva matriz(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31); var días = new Array("日","一", "二", "三","四", "五", "六"); var claseTemp; var hoy=nuevo getHoy(); var año=hoy.año; var mes=hoy.mes; var nuevaCal; function getDays(mes, año) { if (1 == mes) return ((0 == año % 4) && (0 != (año % 100))) ||(0 == año % 400)? 29:28; de lo contrario, devuelve días en el mes [mes]; } función getHoy() { this.now = nueva fecha(); este.año = this.now.getFullYear(); este.mes = este.ahora.getMonth(); este.día = este.ahora.getDate(); } función Calendario() { nuevaCal = nueva Fecha(año,mes,1); hoy = nuevo getHoy(); var día = -1; var díaInicio = newCal.getDay(); var endDay=getDays(newCal.getMonth(), newCal.getFullYear()); var diario = 0; if ((hoy.año == newCal.getFullYear()) &&(hoy.mes == newCal.getMonth())) { día = hoy.día; } var caltable = document.all.caltable.tBodies.calendar; var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear()); for (var intWeek = 0; intWeek < caltable.rows.length;intWeek++) for (var intDay = 0;intDay < caltable.rows[intWeek].cells.length;intDay++) { var cell = caltable.rows[intWeek]. celdas[intDay]; var montemp=(newCal.getMonth()+1)<10?("0"+(newCal.getMonth()+1)):(newCal.getMonth()+1); if ((intDay == startDay) && (0 == diario)){ diario = 1;} var daytemp=diario<10?("0"+diario):(diario); var d="<"+newCal.getFullYear()+"-"+montep+"-"+daytemp+">"; if(día==diario) cell.className="DíaAhora"; else if(intDay==6) cell.className = "DaySat"; else if (intDay==0) cell.className ="DíaDomingo"; else cell.className="Día"; if ((diario > 0) && (diario <= intDaysInMonth)) { cell.innerText = diario; diario++; } else { cell.className="CalendarTD"; celda.innerText = ""; } } document.all.year.value=año; documento.all.month.value=mes+1; } función subMes() { if ((mes-1)<0) { mes=11; año=año-1; } else { mes=mes-1; } Calendario(); } función agregarMes() { if((mes+1)>11) { mes=0; año=año+1; } más { mes=mes+1; } Calendario(); } function setDate() { if (document.all.month.value<1||document.all.month.value>12) { alert("月的有效范围在1-12之间!"); devolver; } año=Math.ceil(document.all.year.value); mes=Math.ceil(document.all.month.value-1); Calendario(); } </Script> <Script> función buttonOver() { var obj = window.event.srcElement; obj.runtimeStyle.cssText = "color de fondo:#FFFFFF"; // obj.className="Hover"; } función buttonOut() { var obj = window.event.srcElement; window.setTimeout(function(){obj.runtimeStyle.cssText = "";},300); } </Script> <Estilo> Entrada {font-family: verdana;font-size: 9pt;text-decoration: none;background-color: #FFFFFF;height: 20px;border: 1px solid #666666;color:#000000 ;} .Calendar {familia de fuentes: verdana; decoración de texto: ninguna; ancho: 170; color de fondo: #C0D0E8; tamaño de fuente: 9pt; borde: 0px punteado #1C6FA5;} .CalendarTD {familia de fuentes: verdana ;tamaño de fuente: 7pt;color: #000000;color de fondo:#f6f6f6;alto: 20px;ancho:11%;alineación de texto: centro;} .Título {familia de fuente: verdana;tamaño de fuente: 11pt; peso de fuente: normal; altura: 24 px; alineación de texto: centro; color: #333333; decoración de texto: ninguna; color de fondo: # A4B9D7; ancho de borde superior: 1 px; ancho de borde derecho: 1 px; ancho-inferior del borde: 1px; ancho-izquierdo-del-borde: 1px; estilo-inferior-del-borde: 1px; color-superior-del-borde: #999999; color-derecho-del-borde: #999999; color-inferior-del-borde: #999999 ;color-borde izquierdo: #999999;} .Día {familia de fuentes: verdana;tamaño de fuente: 7pt;color:#243F65;color de fondo: #E5E9F2;alto: 20px;ancho:11%;alineación de texto : centro;} .DaySat {font-family: verdana;font-size: 7pt;color:#FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12 %;} .DaySun {familia de fuentes: verdana;tamaño de fuente: 7pt;color: #FF0000;decoración de texto: ninguna;color de fondo:#E5E9F2;alineación de texto: centro;alto: 18px;ancho: 12% ;} .DayNow {familia de fuentes: verdana;tamaño de fuente: 7pt;peso de fuente: negrita;color: #000000;color de fondo: #FFFFFF;alto: 20px;alineación de texto: centro;} .DayTitle {fuente -familia: verdana;tamaño de fuente: 9pt;color: #000000;color de fondo: #C0D0E8;alto: 20px;ancho:11%;text-align: center;} .DaySatTitle {font-family: verdana;font- tamaño: 9pt;color:#FF0000;decoración del texto: ninguna;color de fondo:#C0D0E8;alineación del texto: centro;alto: 20px;ancho: 12%;} .DaySunTitle {font-family: verdana;font-size : 9pt;color: #FF0000;decoración del texto: ninguna;color de fondo: #C0D0E8;alineación del texto: centro;alto: 20px;ancho: 12%;} .DayButton {font-family: Webdings;font-size: 9pt;font-weight: negrita;color: #243F65;cursor:hand;text-decoration: none;} </Style> <table border="0" cellpadding="0" cellpacing="1" class="Calendario" id="caltable"> <thead> <tr align="center" valign="middle"> <td colspan="7" class="Título"> <a href="javaScript:subMonth();" title="上一月" Class="DayButton">3</a> <input name="año" tipo="text" size="4" maxlength="4" onkeydown="if (event.keyCode== 13){setDate()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onpaste="this.value=this.value.replace(/[ ^0-9]/g,'')"> 年 <input name="mes" type="text" size="1" maxlength="2" onkeydown="if (event.keyCode==13){setDate ()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onpaste="this.value=this.value.replace(/[^0-9 ]/g,'')"> y <a href="JavaScript:addMonth();" title="下一月" Class="DayButton">4</a> </td> </tr> <tr align="center" valign="middle"> <Script LANGUAGE="JavaScript"> document.write ("<TD clase=DaySunTitle id=diario >" + días[0] + "</TD>"); for (var intLoop = 1; intLoop < días.length-1;intLoop++) document.write("<TD class=DayTitle id=diario>" + días[intLoop] + "</TD>"); document.write("<TD class=DaySatTitle id=diario>" + días[intLoop] + "</TD>"); </Script> </TR> </thead> <TBODY border=1 cellpacing="0" cellpadding="0" ID="calendar" ALIGN=CENTER ONCLICK="getDiary()"> <Script LANGUAGE="JavaScript" > for (var intWeeks = 0; intWeeks < 6; intWeeks++) { document.write("<TR style='cursor:hand'>"); for (var intDays = 0; intDays < días.length;intDays++) document.write("<TD class=CalendarTD onMouseover='buttonOver();' onMouseOut='buttonOut();'></TD>"); documento.write("</TR>"); } </Script> </TBODY> </TABLE> <Script LANGUAGE="JavaScript"> Calendario(); </script>