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.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;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;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'>
";
HTMLstr += "<tr><td bgcolor='darkblue'>
";
HTMLstr += "
";
HTMLstr += "<table border='0' cols='3' width='100%'>
";
HTMLstr += "<tr>
";
HTMLstr += "<td><b><font color='white'>年份：</font></b></td>
";
HTMLstr += "
";
if (n)
{
        HTMLstr += "<td align='right' width='40'>
";
        HTMLstr += "<a href="javascript:prevYear();"><font color='white' size=-2>Prev</font></a>
";
        HTMLstr += "<a href="javascript:nextYear();"><font color='white' size=-2>Next</font></a>
";
}
if (ie||ns6)
{
        HTMLstr += "<td align='right' width='80'>
";
HTMLstr += "<a href="javascript:prevYear();" style='text-decoration: none;'><font color='white' size=-2>Prev</font></a>
";
HTMLstr += "<a href="javascript:nextYear();" style='text-decoration: none;'><font color='white' size=-2>Next</font></a>
";
}
HTMLstr += "</td>
";
HTMLstr += "
";
HTMLstr += "<td align='left'>";

if (n) HTMLstr += "<ilayer id='main'><layer id='idYear' top='0' left='0'>
";
if (ie||ns6)HTMLstr += "<div id='main' style='position: relative'>
";
HTMLstr += "<font color='#99ffff'><b>1999</b></font>
";
if (n) HTMLstr += "</layer></ilayer>
";
if (ie||ns6)HTMLstr += "</div>
";
HTMLstr += "</td>
";
HTMLstr += "</tr>
";
HTMLstr += "<tr>
";
HTMLstr += "<td><b><font color='white'>月份：</font></b></td>
";
HTMLstr += "
";
HTMLstr += "<td align='right'>
";
if (n)
{
        HTMLstr += "<a href="javascript:prevMonth();"><font color='white' size=-2>Prev</font></a>
";
        HTMLstr += "<a href="javascript:nextMonth();"><font color='white' size=-2>Next</font></a>
";
}
if (ie||ns6)
{
HTMLstr += "<a href="javascript:prevMonth();" style='text-decoration: none;'><font color='white' size=-2>Prev</font></a>
";
HTMLstr += "<a href="javascript:nextMonth();" style='text-decoration: none;'><font color='white' size=-2>Next</font></a>
";
}
HTMLstr += "</td>
";
HTMLstr += "
";
HTMLstr += "<td align='left'>
";
if (ie||ns6)HTMLstr += "<div id='main2' style='position=relative;'>";
if (n) HTMLstr += "<ilayer id='main2'><layer id='idMonth' top='0' left='0'>
";
HTMLstr += "<font color='#99ffff'><b>December</b></font>
";
if (ie||ns6)HTMLstr += "<div>
";
if (n) HTMLstr += "</layer></ilayer>
";
HTMLstr += "</td>
";
HTMLstr += "
";
HTMLstr += "</tr>
";
HTMLstr += "</table>
";
HTMLstr += "
";
HTMLstr += "</td></tr>
";
HTMLstr += "
";
HTMLstr += "<tr height='160px'><td valign="top">
";
HTMLstr += "
";
HTMLstr += "<table border=0 cols=7>
";
HTMLstr += "<tr>
";
HTMLstr += "<td width='30'><b>Mon</b></td>
";
HTMLstr += "<td width='30'><b>Tue</b></td>
";
HTMLstr += "<td width='30'><b>Wed</b></td>
";
HTMLstr += "<td width='30'><b>Thur</b></td>
";
HTMLstr += "<td width='30'><b>Fri</b></td>
";
HTMLstr += "<td width='30'><b>Sat</b></td>
";
HTMLstr += "<td width='30'><b>Sun</b></td>
";
HTMLstr += "</tr>
";
HTMLstr += "<tr>
";
HTMLstr += "<td colspan=7>
";
if (ie||ns6)HTMLstr += "<div style='position: relative;'>";
if (n) HTMLstr += "<ilayer id='idMenuContainer' height='120px' width='250px'>
";

  for (var date=1; date <= 31; date++)
  {
if (n)
{
        HTMLstr += "  <layer id="idDate"+date+"" val="+date+" visibility="hide">
";
        HTMLstr += "    <layer><b>"+date+"</b></layer>
";
        HTMLstr += "  </layer>
";
}
if (ie||ns6)
{
        HTMLstr += "  <div id="idDate"+date+"" val="+date+" style="position: absolute; visibility: hidden">
";
        // HTMLstr += "    <b>"+date+"</b>
";
        HTMLstr += "    <b>"+date+"</b>
";
        HTMLstr += "  </div>
";
}
  }

if (ie||ns6)HTMLstr += "</div>";
if (n) HTMLstr += "</ilayer>
";
HTMLstr += "</td></tr>
";
HTMLstr += "</table>
";
HTMLstr += "
";
HTMLstr += "</td></tr>
";
HTMLstr += "</table>
";

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>
";

  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()
ERROR: 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">
";
  HTML += "<table border="1" cellspacing="0" cellpading="0">
";
  for (var month=0; month<12;)
  {
        HTML += "<tr>
";
        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>
";
                month++;
        }
        HTML += "</tr>
";
  }
  HTML += "</table>";
  HTML += "</layer>";
  document.writeln(HTML);
}
var cal = new Calendar();
</script>
</body>

</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/ElvisZhongShao/p/3922548.html