首页 > 代码库 > html编写的日历

html编写的日历

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.allvar ie4=document.allvar 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+=1900var 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 = http://www.mamicode.com/Current_Year;"Defaults()"><p><div id=NavBar style="position:relative;width:286px;top:5px;" align="left"><form name="when"><table><tr><td><input type="button" value="http://www.mamicode.com/<-- 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=http://www.mamicode.com/‘ + j + ‘>‘ + Month_Label[j]);"text" name="year" size=4 maxlength=4 onKeyPress="return Check_Nums()" onKeyUp="On_Year()"></td><td> </td><td><input type="button" value="http://www.mamicode.com/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="http://www.mamicode.com/524288"><PARAM NAME="_ExtentX" VALUE="http://www.mamicode.com/7620"><PARAM NAME="_ExtentY" VALUE="http://www.mamicode.com/5080"><PARAM NAME="_StockProps" VALUE="http://www.mamicode.com/1"><PARAM NAME="BackColor" VALUE="http://www.mamicode.com/-2147483639"><PARAM NAME="Year" VALUE="http://www.mamicode.com/"><PARAM NAME="Month" VALUE="http://www.mamicode.com/"><PARAM NAME="Day" VALUE="http://www.mamicode.com/"><PARAM NAME="DayLength" VALUE="http://www.mamicode.com/0"><PARAM NAME="MonthLength" VALUE="http://www.mamicode.com/0"><PARAM NAME="DayFontColor" VALUE="http://www.mamicode.com/8421504"><PARAM NAME="FirstDay" VALUE="http://www.mamicode.com/1"><PARAM NAME="GridCellEffect" VALUE="http://www.mamicode.com/1"><PARAM NAME="GridFontColor" VALUE="http://www.mamicode.com/0"><PARAM NAME="GridLinesColor" VALUE="http://www.mamicode.com/-2147483638"><PARAM NAME="ShowDateSelectors" VALUE="http://www.mamicode.com/-1"><PARAM NAME="ShowDays" VALUE="http://www.mamicode.com/-1"><PARAM NAME="ShowHorizontalGrid" VALUE="http://www.mamicode.com/-1"><PARAM NAME="ShowTitle" VALUE="http://www.mamicode.com/-1"><PARAM NAME="ShowVerticalGrid" VALUE="http://www.mamicode.com/-1"><PARAM NAME="TitleFontColor" VALUE="http://www.mamicode.com/255"><PARAM NAME="ValueIsNull" VALUE="http://www.mamicode.com/0"></OBJECT> </body></html> 

 (3)

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>日历</title></head><body> <body onl oad="setCurrentMonth()"><script language="JavaScript">var ie=document.allvar ns6=document.getElementById&&!document.allvar n=document.layersif (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 rightXvar 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=http://www.mamicode.com/"javascript:prevYear();\"><font color=‘white‘ size=-2>Prev</font></a>\n";        HTMLstr += "<a href=http://www.mamicode.com/"javascript:nextYear();\"><font color=‘white‘ size=-2>Next</font></a>\n";}if (ie||ns6){        HTMLstr += "<td align=‘right‘ width=‘80‘>\n";HTMLstr += "<a href=http://www.mamicode.com/"javascript:prevYear();\" style=‘text-decoration: none;‘><font color=‘white‘ size=-2>Prev</font></a>\n";HTMLstr += "<a href=http://www.mamicode.com/"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=http://www.mamicode.com/"javascript:prevMonth();\"><font color=‘white‘ size=-2>Prev</font></a>\n";        HTMLstr += "<a href=http://www.mamicode.com/"javascript:nextMonth();\"><font color=‘white‘ size=-2>Next</font></a>\n";}if (ie||ns6){HTMLstr += "<a href=http://www.mamicode.com/"javascript:prevMonth();\" style=‘text-decoration: none;‘><font color=‘white‘ size=-2>Prev</font></a>\n";HTMLstr += "<a href=http://www.mamicode.com/"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=http://www.mamicode.com/"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=http://www.mamicode.com/"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=http://www.mamicode.com/"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>