一个js作的日历

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>日历</title>
<style type="text/css">
<!--
body { font-size: 9pt}
table { font-size: 9pt}
a   { text-decoration: none}
-->
</style>
<script language="JavaScript">
<!--
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('一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月');

var Current_Year = Current_Date.getYear();

var Today = Current_Date.getDate();

function Header(Year, Month) {

  if (Month == 1) {
   if ((Year % 400 == 0) || ((Year % 4 == 0) && (Year % 100 != 0))) {
     Days_in_Month[1] = 29;
   }
  }
  var Header_String = Year + '年' + Month_Label[Month];
  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=2 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">日</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">一</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">二</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">三</th>';

  HTML_String += '<th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">四</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">五</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">六</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">&nbsp;</td>';
     }
     Loop_Counter++;
   }
   HTML_String += '</tr>';
  }
  HTML_String += '</table></td></tr></table>';
  document.all.Calendar.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 (!document.all)
  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;
}

function tick() {
var hours, minutes, seconds, xfile;
var intHours, intMinutes, intSeconds;
var today;
today = new Date();
intHours = today.getHours();
intMinutes = today.getMinutes();
intSeconds = today.getSeconds();
if (intHours == 0) {
hours = "12:";
xfile = "午夜 ";
} else if (intHours < 12) {
hours = intHours+":";
xfile = "上午 ";
} else if (intHours == 12) {
hours = "12:";
xfile = "正午 ";
} else {
intHours = intHours - 12
hours = intHours + ":";
xfile = "下午 ";
}
if (intMinutes < 10) {
minutes = "0"+intMinutes+":";
} else {
minutes = intMinutes+":";
}
if (intSeconds < 10) {
seconds = "0"+intSeconds+" ";
} else {
seconds = intSeconds+" ";
}
timeString = xfile+hours+minutes+seconds;
document.all.Clock.innerHTML = timeString;
window.setTimeout("tick();", 100);
}

//-->
</script>
</head>

<body onLoad="Defaults();tick()">
<table width="170" border="1" cellspacing="0" cellpadding="0">
 <form name="when">
 <tr>
  <td align="center">
  <div id=NavBar style="position:relative;top:-1px;">

  <select name="month" onChange="On_Month()">
<script language="JavaScript1.2">
<!--
if (document.all){
  for (j=0;j<Month_Label.length;j++) {
   document.writeln('<option value=' + j + '>' + Month_Label[j]);
  }
}
//-->
</script>
  </select>
  <input type="text" name="year" size=4 maxlength=4 onKeyPress="return Check_Nums()" onKeyUp="On_Year()"><br>
   <div id="Clock" style="position:relative;top:-2px;"></div>
</div>
<div id=Calendar style="position:relative;top:-3px;"></div>
  <input type="button" value=" 上月 " onClick="Skip('-')">
  <input type="button" value=" 下月 " onClick="Skip('+')">
 </td>
  </tr>
 </form>
 </table>
</body>
</html>
//由于笔者时间上的缘故所有效果的预览交由读者自己放入网页查试,谢谢.