1、html
(1)
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>日历</title> </head> <body> <style> <!-- .tablinks a, .tablinks a:visited{ color:blue } .tablinks a:hover{ color:brown } --> </style> <script language="JavaScript"> var ns6=document.getElementById&&!document.all var ie4=document.all var Selected_Month; var Selected_Year; var Current_Date = new Date(); var Current_Month = Current_Date.getMonth(); var Days_in_Month = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); var Month_Label = new Array(‘January‘, ‘February‘, ‘March‘, ‘April‘, ‘May‘, ‘June‘, ‘July‘, ‘August‘, ‘September‘, ‘October‘, ‘November‘, ‘December‘); var Current_Year = Current_Date.getYear(); if (Current_Year < 1000) Current_Year+=1900 var Today = Current_Date.getDate(); function Header(Year, Month) { if (Month == 1) { Days_in_Month[1] = ((Year % 400 == 0) || ((Year % 4 == 0) && (Year % 100 !=0))) ? 29 : 28; } var Header_String = Month_Label[Month] + ‘ ‘ + Year; return Header_String; } function Make_Calendar(Year, Month) { var First_Date = new Date(Year, Month, 1); var Heading = Header(Year, Month); var First_Day = First_Date.getDay() + 1; if (((Days_in_Month[Month] == 31) && (First_Day >= 6)) || ((Days_in_Month[Month] == 30) && (First_Day == 7))) { var Rows = 6; } else if ((Days_in_Month[Month] == 28) && (First_Day == 1)) { var Rows = 4; } else { var Rows = 5; } var HTML_String = ‘<table><tr><td valign="top"><table BORDER=4 CELLSPACING=1 cellpadding=2 FRAME="box" BGCOLOR="C0C0C0" BORDERCOLORLIGHT="808080">‘; HTML_String += ‘<tr><th colspan=7 BGCOLOR="FFFFFF" BORDERCOLOR="000000">‘ + Heading + ‘</font></th></tr>‘; HTML_String += ‘<tr><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sun</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Mon</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Tue</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Wed</th>‘; HTML_String += ‘<th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Thu</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Fri</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sat</th></tr>‘; var Day_Counter = 1; var Loop_Counter = 1; for (var j = 1; j <= Rows; j++) { HTML_String += ‘<tr ALIGN="left" VALIGN="top">‘; for (var i = 1; i < 8; i++) { if ((Loop_Counter >= First_Day) && (Day_Counter <= Days_in_Month[Month])) { if ((Day_Counter == Today) && (Year == Current_Year) && (Month == Current_Month)) { HTML_String += ‘<td BGCOLOR="FFFFFF" BORDERCOLOR="000000"><strong><font color="red">‘ + Day_Counter + ‘</font></strong></td>‘; } else { HTML_String += ‘<td BGCOLOR="FFFFFF" BORDERCOLOR="000000">‘ + Day_Counter + ‘</td>‘; } Day_Counter++; } else { HTML_String += ‘<td BORDERCOLOR="C0C0C0"> </td>‘; } Loop_Counter++; } HTML_String += ‘</tr>‘; } HTML_String += ‘</table></td></tr></table>‘; cross_el=ns6? document.getElementById("Calendar") : document.all.Calendar cross_el.innerHTML = HTML_String; } function Check_Nums() { if ((event.keyCode < 48) || (event.keyCode > 57)) { return false; } } function On_Year() { var Year = document.when.year.value; if (Year.length == 4) { Selected_Month = document.when.month.selectedIndex; Selected_Year = Year; Make_Calendar(Selected_Year, Selected_Month); } } function On_Month() { var Year = document.when.year.value; if (Year.length == 4) { Selected_Month = document.when.month.selectedIndex; Selected_Year = Year; Make_Calendar(Selected_Year, Selected_Month); } else { alert(‘Please enter a valid year.‘); document.when.year.focus(); } } function Defaults() { if (!ie4&&!ns6) return var Mid_Screen = Math.round(document.body.clientWidth / 2); document.when.month.selectedIndex = Current_Month; document.when.year.value = Current_Year; Selected_Month = Current_Month; Selected_Year = Current_Year; Make_Calendar(Current_Year, Current_Month); } function Skip(Direction) { if (Direction == ‘+‘) { if (Selected_Month == 11) { Selected_Month = 0; Selected_Year++; } else { Selected_Month++; } } else { if (Selected_Month == 0) { Selected_Month = 11; Selected_Year--; } else { Selected_Month--; } } Make_Calendar(Selected_Year, Selected_Month); document.when.month.selectedIndex = Selected_Month; document.when.year.value = Selected_Year; } </script> <body onLoad="Defaults()"> <p><div id=NavBar style="position:relative;width:286px;top:5px;" align="left"> <form name="when"><table> <tr> <td><input type="button" value="<-- Last" onClick="Skip(‘-‘)"></td> <td> </td> <td><select name="month" onChange="On_Month()"> <script language="JavaScript1.2"> if (ie4||ns6){ for (j=0;j<Month_Label.length;j++) { document.writeln(‘<option value=‘ + j + ‘>‘ + Month_Label[j]); } } </script> </select> </td> <td><input type="text" name="year" size=4 maxlength=4 onKeyPress="return Check_Nums()" onKeyUp="On_Year()"></td> <td> </td> <td><input type="button" value="Next -->" onClick="Skip(‘+‘)"></td> </tr></table></form></div> <div id=Calendar style="position:relative;width:238px;top:-2px;" align="left"></div> </body> </html>
(2)
<html> <body> <OBJECT id=Calendar1 style="LEFT: 0px; TOP: 0px" classid="clsid:8E27C92B-1264-101C-8A2F-040224009C02" VIEWASTEXT> <PARAM NAME="_Version" VALUE="524288"> <PARAM NAME="_ExtentX" VALUE="7620"> <PARAM NAME="_ExtentY" VALUE="5080"> <PARAM NAME="_StockProps" VALUE="1"> <PARAM NAME="BackColor" VALUE="-2147483639"> <PARAM NAME="Year" VALUE="<%=year(now())%>"> <PARAM NAME="Month" VALUE="<%=month(now())%>"> <PARAM NAME="Day" VALUE="<%=day(now())%>"> <PARAM NAME="DayLength" VALUE="0"> <PARAM NAME="MonthLength" VALUE="0"> <PARAM NAME="DayFontColor" VALUE="8421504"> <PARAM NAME="FirstDay" VALUE="1"> <PARAM NAME="GridCellEffect" VALUE="1"> <PARAM NAME="GridFontColor" VALUE="0"> <PARAM NAME="GridLinesColor" VALUE="-2147483638"> <PARAM NAME="ShowDateSelectors" VALUE="-1"> <PARAM NAME="ShowDays" VALUE="-1"> <PARAM NAME="ShowHorizontalGrid" VALUE="-1"> <PARAM NAME="ShowTitle" VALUE="-1"> <PARAM NAME="ShowVerticalGrid" VALUE="-1"> <PARAM NAME="TitleFontColor" VALUE="255"> <PARAM NAME="ValueIsNull" VALUE="0"></OBJECT> </body> </html>
(3)
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>日历</title> </head> <body> <body onLoad="setCurrentMonth()"> <script language="JavaScript"> var ie=document.all var ns6=document.getElementById&&!document.all var n=document.layers if (ie||ns6) {fShow="visible";fHide="hidden";} if (n) {fShow="show"; fHide="hide";} var MonthNames = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"); var nCurrentYear = 0; var nCurrentMonth = 0; var nWidth = 30; var nHeight = 20; var leftX; var rightX var topY; var bottomY; function Calendar() { var HTMLstr = ""; HTMLstr += "<table width=‘250px‘ cellspacing=‘0‘ cellpadding=‘0‘ border=‘1‘>\n"; HTMLstr += "<tr><td bgcolor=‘darkblue‘>\n"; HTMLstr += "\n"; HTMLstr += "<table border=‘0‘ cols=‘3‘ width=‘100%‘>\n"; HTMLstr += "<tr>\n"; HTMLstr += "<td><b><font color=‘white‘>年份:</font></b></td>\n"; HTMLstr += "\n"; if (n) { HTMLstr += "<td align=‘right‘ width=‘40‘>\n"; HTMLstr += "<a href=\"javascript:prevYear();\"><font color=‘white‘ size=-2>Prev</font></a>\n"; HTMLstr += "<a href=\"javascript:nextYear();\"><font color=‘white‘ size=-2>Next</font></a>\n"; } if (ie||ns6) { HTMLstr += "<td align=‘right‘ width=‘80‘>\n"; HTMLstr += "<a href=\"javascript:prevYear();\" style=‘text-decoration: none;‘><font color=‘white‘ size=-2>Prev</font></a>\n"; HTMLstr += "<a href=\"javascript:nextYear();\" style=‘text-decoration: none;‘><font color=‘white‘ size=-2>Next</font></a>\n"; } HTMLstr += "</td>\n"; HTMLstr += "\n"; HTMLstr += "<td align=‘left‘>"; if (n) HTMLstr += "<ilayer id=‘main‘><layer id=‘idYear‘ top=‘0‘ left=‘0‘>\n"; if (ie||ns6)HTMLstr += "<div id=‘main‘ style=‘position: relative‘>\n"; HTMLstr += "<font color=‘#99ffff‘><b>1999</b></font>\n"; if (n) HTMLstr += "</layer></ilayer>\n"; if (ie||ns6)HTMLstr += "</div>\n"; HTMLstr += "</td>\n"; HTMLstr += "</tr>\n"; HTMLstr += "<tr>\n"; HTMLstr += "<td><b><font color=‘white‘>月份:</font></b></td>\n"; HTMLstr += "\n"; HTMLstr += "<td align=‘right‘>\n"; if (n) { HTMLstr += "<a href=\"javascript:prevMonth();\"><font color=‘white‘ size=-2>Prev</font></a>\n"; HTMLstr += "<a href=\"javascript:nextMonth();\"><font color=‘white‘ size=-2>Next</font></a>\n"; } if (ie||ns6) { HTMLstr += "<a href=\"javascript:prevMonth();\" style=‘text-decoration: none;‘><font color=‘white‘ size=-2>Prev</font></a>\n"; HTMLstr += "<a href=\"javascript:nextMonth();\" style=‘text-decoration: none;‘><font color=‘white‘ size=-2>Next</font></a>\n"; } HTMLstr += "</td>\n"; HTMLstr += "\n"; HTMLstr += "<td align=‘left‘>\n"; if (ie||ns6)HTMLstr += "<div id=‘main2‘ style=‘position=relative;‘>"; if (n) HTMLstr += "<ilayer id=‘main2‘><layer id=‘idMonth‘ top=‘0‘ left=‘0‘>\n"; HTMLstr += "<font color=‘#99ffff‘><b>December</b></font>\n"; if (ie||ns6)HTMLstr += "<div>\n"; if (n) HTMLstr += "</layer></ilayer>\n"; HTMLstr += "</td>\n"; HTMLstr += "\n"; HTMLstr += "</tr>\n"; HTMLstr += "</table>\n"; HTMLstr += "\n"; HTMLstr += "</td></tr>\n"; HTMLstr += "\n"; HTMLstr += "<tr height=‘160px‘><td valign=\"top\">\n"; HTMLstr += "\n"; HTMLstr += "<table border=0 cols=7>\n"; HTMLstr += "<tr>\n"; HTMLstr += "<td width=‘30‘><b>Mon</b></td>\n"; HTMLstr += "<td width=‘30‘><b>Tue</b></td>\n"; HTMLstr += "<td width=‘30‘><b>Wed</b></td>\n"; HTMLstr += "<td width=‘30‘><b>Thur</b></td>\n"; HTMLstr += "<td width=‘30‘><b>Fri</b></td>\n"; HTMLstr += "<td width=‘30‘><b>Sat</b></td>\n"; HTMLstr += "<td width=‘30‘><b>Sun</b></td>\n"; HTMLstr += "</tr>\n"; HTMLstr += "<tr>\n"; HTMLstr += "<td colspan=7>\n"; if (ie||ns6)HTMLstr += "<div style=‘position: relative;‘>"; if (n) HTMLstr += "<ilayer id=‘idMenuContainer‘ height=‘120px‘ width=‘250px‘>\n"; for (var date=1; date <= 31; date++) { if (n) { HTMLstr += " <layer id=\"idDate"+date+"\" val="+date+" visibility=\"hide\">\n"; HTMLstr += " <layer><b>"+date+"</b></layer>\n"; HTMLstr += " </layer>\n"; } if (ie||ns6) { HTMLstr += " <div id=\"idDate"+date+"\" val="+date+" style=\"position: absolute; visibility: hidden\">\n"; // HTMLstr += " <b>"+date+"</b>\n"; HTMLstr += " <b>"+date+"</b>\n"; HTMLstr += " </div>\n"; } } if (ie||ns6)HTMLstr += "</div>"; if (n) HTMLstr += "</ilayer>\n"; HTMLstr += "</td></tr>\n"; HTMLstr += "</table>\n"; HTMLstr += "\n"; HTMLstr += "</td></tr>\n"; HTMLstr += "</table>\n"; document.writeln(HTMLstr); buildMonthMenu(HTMLstr); } function setCurrentMonth() { date = new Date(); currentyear=date.getYear() if (currentyear < 1000) currentyear+=1900 setYearMonth(currentyear, date.getMonth()+1); } function setMonth(nMonth) { setYearMonth(nCurrentYear, nMonth); } function setYearMonth(nYear, nMonth) { if (ie||ns6) { nCurrentYear = nYear; nCurrentMonth = nMonth; var cross_obj=ns6? document.getElementById("main"): document.all["main"] var cross_obj2=ns6? document.getElementById("main2"): document.all["main2"] cross_obj.innerHTML = "<font color=\"#99ffff\"><b>"+nCurrentYear+"</b></font>"; cross_obj2.innerHTML = "<a href=\"javascript:showMonthMenu()\" style=\"text-decoration:none\"><font color=\"#99ffff\"><b>"+MonthNames[nCurrentMonth-1]+"</b></font></a>\n"; var date = new Date(nCurrentYear, nCurrentMonth-1, 1); var nWeek = 1; var nDate; while (date.getMonth() == nCurrentMonth-1) { nDate = date.getDate(); nLastDate = nDate; var posDay = date.getDay()-1; if (posDay == -1) posDay=6; var posLeft = posDay*(nWidth+5)+5; var posTop = (nWeek-1)*nHeight; var cross_obj3=ns6? document.getElementById("idDate"+nDate).style : document.all["idDate"+nDate].style cross_obj3.left = posLeft; cross_obj3.top = posTop; if (date.getDay() == 0 || date.getDay() == 6) cross_obj3.color = "red"; else cross_obj3.color = "black"; cross_obj3.visibility = "visible"; // original: // date = new Date(currentyear, date.getMonth(), date.getDate()+1); // johan: date = new Date(nCurrentYear, date.getMonth(), date.getDate()+1); if (posDay == 6) nWeek++; } for (++nDate; nDate <= 31; nDate++){ cross_obj3=ns6? document.getElementById("idDate"+nDate).style : document.all["idDate"+nDate].style cross_obj3.visibility = "hidden"; } } if (n) { // Verify parameters if (nMonth < 1 || nMonth > 12) {alert("Function: setYearMonth()\nERROR: Incorrect month "+nMomth);} nCurrentYear = nYear; nCurrentMonth = nMonth; document.main.document.idYear.document.open(); document.main.document.idYear.document.write("<font color=\"#99ffff\"><b>"+nCurrentYear+"</b></font>"); document.main.document.idYear.document.close(); document.main2.document.idMonth.document.open(); document.main2.document.idMonth.document.write("<a href=\"javascript:showMonthMenu()\" style=\"text-decoration:none\"><font color=\"#99ffff\"><b>"+MonthNames[nCurrentMonth-1]+"</b></font></a>"); document.main2.document.idMonth.document.close(); var date = new Date(nYear, nMonth-1, 1); var nWeek = 1; var nDate; while (date.getMonth() == nMonth-1) { nDate = date.getDate(); nLastDate = nDate; var posDay = date.getDay()-1; if (posDay == -1) posDay=6; var posLeft = posDay*(nWidth+5)+5; var posTop = (nWeek-1)*nHeight; document.layers["idMenuContainer"].document.layers["idDate"+nDate].left = posLeft; document.layers["idMenuContainer"].document.layers["idDate"+nDate].top = posTop; if (date.getDay() == 0 || date.getDay() == 6) document.layers["idMenuContainer"].document.layers["idDate"+nDate].color = "red"; else document.layers["idMenuContainer"].document.layers["idDate"+nDate].color = "black"; document.layers["idMenuContainer"].document.layers["idDate"+nDate].visibility = "visible"; date = new Date(nCurrentYear, date.getMonth(), date.getDate()+1); if (posDay == 6) nWeek++; } for (++nDate; nDate <= 31; nDate++) document.layers["idMenuContainer"].document.layers["idDate"+nDate].visibility = "hidden"; } } function nextMonth() { nCurrentMonth++; if (nCurrentMonth > 12) { nCurrentMonth -= 12; nextYear(); } setYearMonth(nCurrentYear, nCurrentMonth); } function prevMonth() { nCurrentMonth--; if (nCurrentMonth < 1) { nCurrentMonth += 12; prevYear(); } setYearMonth(nCurrentYear, nCurrentMonth); } function prevYear() { nCurrentYear--; setYearMonth(nCurrentYear, nCurrentMonth); } function nextYear() { nCurrentYear++; setYearMonth(nCurrentYear, nCurrentMonth); } //////////////////////////////////////////////////// function updateIt(e) { // var x = e.pageX; // var y = e.pageY; // if (x > rightX || x < leftX) hideMonthMenu(); // else if (y > bottomY || y < topY) hideMonthMenu(); } function hideMonthMenu() { document.layers["idMonthMenu"].visibility="hide"; } function showMonthMenu() { if (!n) return; topY = document.layers["main2"].pageY-50; bottomY = document.layers["main2"].pageY + document.layers["idMonthMenu"].clip.height+50; leftX = document.layers["main2"].pageX-50; rightX = document.layers["main2"].pageX + document.layers["idMonthMenu"].clip.width+50; document.layers["idMonthMenu"].top = document.layers["main2"].pageY+document.layers["main2"].clip.height; document.layers["idMonthMenu"].left = document.layers["main2"].pageX; document.layers["idMonthMenu"].visibility="show"; } function buildMonthMenu() { if (!n) return; var HTML = ""; HTML += "<layer id=\"idMonthMenu\" visibility=\"hide\" width=\"120\" bgcolor=\"darkblue\">\n"; HTML += "<table border=\"1\" cellspacing=\"0\" cellpading=\"0\">\n"; for (var month=0; month<12;) { HTML += "<tr>\n"; for (var i = 0; i < 3; i++) { var nMonth = month+1; HTML += "<td><a href=\"javascript:hideMonthMenu();setMonth("+nMonth+");\"><font color=\"white\" size=-1><b>"+MonthNames[month]+"</b></font></a></td>\n"; month++; } HTML += "</tr>\n"; } HTML += "</table>"; HTML += "</layer>"; document.writeln(HTML); } var cal = new Calendar(); </script> </body> </html>
html编写的日历
时间: 2024-10-29 04:43:07