4个很不错的日历代码

baby69yy2000

样式一:
<Script LANGUAGE="JavaScript"> var months = new Array("一", "二", "三","四", "五", "六", "七", "八", "九","十", "十一", "十二"); var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31); var days = new Array("日","一", "二", "三","四", "五", "六"); var classTemp; var today=new getToday(); var year=today.year; var month=today.month; var newCal;  function getDays(month, year) {  if (1 == month) return ((0 == year % 4) && (0 != (year % 100))) ||(0 == year % 400) ? 29 : 28;  else return daysInMonth[month]; } function getToday() {  this.now = new Date();  this.year = this.now.getFullYear();  this.month = this.now.getMonth();  this.day = this.now.getDate(); } function Calendar() {  newCal = new Date(year,month,1);  today = new getToday();     var day = -1;  var startDay = newCal.getDay();  var endDay=getDays(newCal.getMonth(), newCal.getFullYear());  var daily = 0;  if ((today.year == newCal.getFullYear()) &&(today.month == newCal.getMonth()))  {   day = today.day;  }  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].cells[intDay];    var montemp=(newCal.getMonth()+1)<10?("0"+(newCal.getMonth()+1)):(newCal.getMonth()+1);             if ((intDay == startDay) && (0 == daily)){ daily = 1;}    var daytemp=daily<10?("0"+daily):(daily);    var d="<"+newCal.getFullYear()+"-"+montemp+"-"+daytemp+">";    if(day==daily) cell.className="DayNow";    else if(intDay==6) cell.className = "DaySat";    else if (intDay==0) cell.className ="DaySun";    else cell.className="Day";    if ((daily > 0) && (daily <= intDaysInMonth))    {     cell.innerText = daily;     daily++;    } else    {     cell.className="CalendarTD";     cell.innerText = "";    }  }  document.all.year.value=year;  document.all.month.value=month+1; } function subMonth() {  if ((month-1)<0)  {   month=11;   year=year-1;  } else  {   month=month-1;  }  Calendar(); } function addMonth() {  if((month+1)>11)  {   month=0;   year=year+1;  } else  {   month=month+1;  }  Calendar(); } function setDate()  {  if (document.all.month.value<1||document.all.month.value>12)  {   alert("月的有效范围在1-12之间!");   return;  }  year=Math.ceil(document.all.year.value);  month=Math.ceil(document.all.month.value-1);  Calendar(); }</Script><Script>function buttonOver(){ var obj = window.event.srcElement; obj.runtimeStyle.cssText = "background-color:#FFFFFF";// obj.className="Hover";}function buttonOut(){ var obj = window.event.srcElement; window.setTimeout(function(){obj.runtimeStyle.cssText = "";},300);}</Script><Style>Input {font-family: verdana;font-size: 9pt;text-decoration: none;background-color: #FFFFFF;height: 20px;border: 1px solid #666666;color:#000000;}.Calendar {font-family: verdana;text-decoration: none;width: 170;background-color: #C0D0E8;font-size: 9pt;border:0px dotted #1C6FA5;}.CalendarTD {font-family: verdana;font-size: 7pt;color: #000000;background-color:#f6f6f6;height: 20px;width:11%;text-align: center;}.Title {font-family: verdana;font-size: 11pt;font-weight: normal;height: 24px;text-align: center;color: #333333;text-decoration: none;background-color: #A4B9D7;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-bottom-style:1px;border-top-color: #999999;border-right-color: #999999;border-bottom-color: #999999;border-left-color: #999999;}.Day {font-family: verdana;font-size: 7pt;color:#243F65;background-color: #E5E9F2;height: 20px;width:11%;text-align: center;}.DaySat {font-family: verdana;font-size: 7pt;color:#FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}.DaySun {font-family: verdana;font-size: 7pt;color: #FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}.DayNow {font-family: verdana;font-size: 7pt;font-weight: bold;color: #000000;background-color: #FFFFFF;height: 20px;text-align: center;}.DayTitle {font-family: verdana;font-size: 9pt;color: #000000;background-color: #C0D0E8;height: 20px;width:11%;text-align: center;}.DaySatTitle {font-family: verdana;font-size: 9pt;color:#FF0000;text-decoration: none;background-color:#C0D0E8;text-align: center;height: 20px;width: 12%;}.DaySunTitle {font-family: verdana;font-size: 9pt;color: #FF0000;text-decoration: none;background-color: #C0D0E8;text-align: center;height: 20px;width: 12%;}.DayButton {font-family: Webdings;font-size: 9pt;font-weight: bold;color: #243F65;cursor:hand;text-decoration: none;}</Style><table border="0" cellpadding="0" cellspacing="1" class="Calendar" id="caltable"><thead>     <tr align="center" valign="middle">   <td colspan="7" class="Title">   <a href="javaScript:subMonth();" title="上一月" Class="DayButton">3</a> <input name="year" type="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="month" 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,'')"> 月 <a href="JavaScript:addMonth();" title="下一月" Class="DayButton">4</a>  </td> </tr> <tr align="center" valign="middle">   <Script LANGUAGE="JavaScript">     document.write("<TD class=DaySunTitle id=diary >" + days[0] + "</TD>");    for (var intLoop = 1; intLoop < days.length-1;intLoop++)     document.write("<TD class=DayTitle id=diary>" + days[intLoop] + "</TD>");     document.write("<TD class=DaySatTitle id=diary>" + days[intLoop] + "</TD>");   </Script> </TR> </thead><TBODY border=1 cellspacing="0" cellpadding="0" ID="calendar" ALIGN=CENTER > <Script LANGUAGE="JavaScript">  for (var intWeeks = 0; intWeeks < 6; intWeeks++)  {   document.write("<TR style='cursor:hand'>");   for (var intDays = 0; intDays < days.length;intDays++) document.write("<TD class=CalendarTD onMouseover='buttonOver();' onMouseOut='buttonOut();'></TD>");   document.write("</TR>");  }  </Script></TBODY></TABLE><Script  LANGUAGE="JavaScript"> Calendar();</Script>
样式二:
<script language=javascript>var DS_x,DS_y;function dateSelector()  //构造dateSelector对象，用来实现一个日历形式的日期输入框。{  var myDate=new Date();  this.year=myDate.getFullYear();  //定义year属性，年份，默认值为当前系统年份。  this.month=myDate.getMonth()+1;  //定义month属性，月份，默认值为当前系统月份。  this.date=myDate.getDate();  //定义date属性，日，默认值为当前系统的日。  this.inputName='';  //定义inputName属性，即输入框的name，默认值为空。注意：在同一页中出现多个日期输入框，不能有重复的name！  this.display=display;  //定义display方法，用来显示日期输入框。}function display()  //定义dateSelector的display方法，它将实现一个日历形式的日期选择框。{  var week=new Array('日','一','二','三','四','五','六');  document.write("<style type=text/css>");  document.write("  .ds_font td,span  { font: normal 12px 宋体; color: #000000; }");  document.write("  .ds_border  { border: 1px solid #000000; cursor: hand; background-color: #DDDDDD }");  document.write("  .ds_border2  { border: 1px solid #000000; cursor: hand; background-color: #DDDDDD }");  document.write("</style>");  document.write("<input style='text-align:center;' id='DS_"+this.inputName+"' name='"+this.inputName+"' value='"+this.year+"-"+this.month+"-"+this.date+"' title=双击可进行编缉 ondblclick='this.readOnly=false;this.focus()' onblur='this.readOnly=true' readonly>");  document.write("<button style='width:60px;height:18px;font-size:12px;margin:1px;border:1px solid #A4B3C8;background-color:#DFE7EF;' type=button onclick=this.nextSibling.style.display='block' onfocus=this.blur()>选择日期</button>");  document.write("<div style='position:absolute;display:none;text-align:center;width:0px;height:0px;overflow:visible' onselectstart='return false;'>");  document.write("  <div style='position:absolute;left:-60px;top:20px;width:142px;height:165px;background-color:#F6F6F6;border:1px solid #245B7D;' class=ds_font>");  document.write("    <table cellpadding=0 cellspacing=1 width=140 height=20 bgcolor=#CEDAE7 onmousedown='DS_x=event.x-parentNode.style.pixelLeft;DS_y=event.y-parentNode.style.pixelTop;setCapture();' onmouseup='releaseCapture();' onmousemove='dsMove(this.parentNode)' style='cursor:move;'>");  document.write("      <tr align=center>");  document.write("        <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=subYear(this) title='减小年份'><<</td>");  document.write("        <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=subMonth(this) title='减小月份'><</td>");  document.write("        <td width=52%><b>"+this.year+"</b><b>年</b><b>"+this.month+"</b><b>月</b></td>");  document.write("        <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=addMonth(this) title='增加月份'>></td>");  document.write("        <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=addYear(this) title='增加年份'>>></td>");  document.write("      </tr>");  document.write("    </table>");  document.write("    <table cellpadding=0 cellspacing=0 width=140 height=20 onmousedown='DS_x=event.x-parentNode.style.pixelLeft;DS_y=event.y-parentNode.style.pixelTop;setCapture();' onmouseup='releaseCapture();' onmousemove='dsMove(this.parentNode)' style='cursor:move;'>");  document.write("      <tr align=center>");  for(i=0;i<7;i++) document.write("      <td>"+week[i]+"</td>");  document.write("      </tr>");  document.write("    </table>");  document.write("    <table cellpadding=0 cellspacing=2 width=140 bgcolor=#EEEEEE>");  for(i=0;i<6;i++)  {    document.write("    <tr align=center>"); for(j=0;j<7;j++)      document.write("    <td width=10% height=16 onmouseover=if(this.innerText!=''&&this.className!='ds_border2')this.className='ds_border' onmouseout=if(this.className!='ds_border2')this.className='' onclick=getvalue(this,document.all('DS_"+this.inputName+"'))></td>");    document.write("    </tr>");  }  document.write("    </table>");  document.write("    <span style=cursor:hand onclick=this.parentNode.parentNode.style.display='none'>【关闭】</span>");  document.write("  </div>");  document.write("</div>");  dateShow(document.all("DS_"+this.inputName).nextSibling.nextSibling.childNodes[0].childNodes[2],this.year,this.month)}function subYear(obj)  //减小年份{  var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;  myObj[0].innerHTML=eval(myObj[0].innerHTML)-1;  dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))}function addYear(obj)  //增加年份{  var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;  myObj[0].innerHTML=eval(myObj[0].innerHTML)+1;  dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))}function subMonth(obj)  //减小月份{  var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;  var month=eval(myObj[2].innerHTML)-1;  if(month==0)  {    month=12;    subYear(obj);  }  myObj[2].innerHTML=month;  dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))}function addMonth(obj)  //增加月份{  var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;  var month=eval(myObj[2].innerHTML)+1;  if(month==13)  {    month=1;    addYear(obj);  }  myObj[2].innerHTML=month;  dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))}function dateShow(obj,year,month)  //显示各月份的日{  var myDate=new Date(year,month-1,1);  var today=new Date();  var day=myDate.getDay();  var selectDate=obj.parentNode.parentNode.previousSibling.previousSibling.value.split('-');  var length;  switch(month)  {    case 1:    case 3:    case 5:    case 7:    case 8:    case 10:    case 12:      length=31;      break;    case 4:    case 6:    case 9:    case 11:      length=30;      break;    case 2:      if((year%4==0)&&(year%100!=0)||(year%400==0))        length=29;      else        length=28;  }  for(i=0;i<obj.cells.length;i++)  {    obj.cells[i].innerHTML='';    obj.cells[i].style.color='';    obj.cells[i].className='';  }  for(i=0;i<length;i++)  {    obj.cells[i+day].innerHTML=(i+1);    if(year==today.getFullYear()&&(month-1)==today.getMonth()&&(i+1)==today.getDate())      obj.cells[i+day].style.color='red';    if(year==eval(selectDate[0])&&month==eval(selectDate[1])&&(i+1)==eval(selectDate[2]))      obj.cells[i+day].className='ds_border2';  }}function getvalue(obj,inputObj)  //把选择的日期传给输入框{  var myObj=inputObj.nextSibling.nextSibling.childNodes[0].childNodes[0].cells[2].childNodes;  if(obj.innerHTML)    inputObj.value=myObj[0].innerHTML+"-"+myObj[2].innerHTML+"-"+obj.innerHTML;  inputObj.nextSibling.nextSibling.style.display='none';  for(i=0;i<obj.parentNode.parentNode.parentNode.cells.length;i++)    obj.parentNode.parentNode.parentNode.cells[i].className='';  obj.className='ds_border2'}function dsMove(obj)  //实现层的拖移{  if(event.button==1)  {    var X=obj.clientLeft;    var Y=obj.clientTop;    obj.style.pixelLeft=X+(event.x-DS_x);    obj.style.pixelTop=Y+(event.y-DS_y);  }}</script>从<script language=javascript>  var myDate=new dateSelector();  myDate.year--;  myDate.inputName='start_date';  //注意这里设置输入框的name，同一页中日期输入框，不能出现重复的name。  myDate.display();</script>
样式三:
<title> - -选择日期 - -                                                                                                 </title><script>//*************************日历控件***************************// cody by [STAR].sjz  2003-10-31// 说明:返回值为 一个字符串// 格式如下:// 使用方法  : //  var dataString = showModalDialog("calendar.htm", "dd日mm月yyyy年" ,"dialogWidth:286px;dialogHeight:221px;status:no;help:no;");var userFormatString;if(window.dialogArguments ==null){ userFormatString = "yyyy-mm--dd";}else{ userFormatString = window.dialogArguments;}with(new Date()){ var Nyear = getYear(); var Nmonth =  getMonth() +1; var Ndate =  getDate();}window.returnValue = new dataObj(Nyear,Nmonth,Ndate ).getDateString(userFormatString);window.document.onclick = function(){ var obj = window.event.srcElement; if(obj.tagName.toLowerCase() == "span"  &&  obj.parentNode.className.replace(/Ctable/ig,"star") == "star" ) {  try{   window.currentActiveItem.runtimeStyle.cssText = "";  }  catch(e){ }  Nyear = obj.id.split("-")[0];  Nmonth = obj.id.split("-")[1];  Ndate = obj.id.split("-")[2];  window.currentActiveItem = obj;  window.currentSelectDate = window.currentActiveItem.id;  window.currentActiveItem.runtimeStyle.cssText = "background:url(http://www.5d.cn/bbs/uploadFiles/2003-10/3120401281018.gif) no-repeat 12px 6px;color:#000;padding-top:1px;font-weight:bold"; }} function dataObj(year,month,date)  { this.year  = year this.month = month this.date  =  date this.getDateString =  function(formatString)  {   return formatString.replace(/yyyy/ig , this.year).replace(/mm/ig , this.month).replace(/dd/ig , this.date)  }}window.onload = function(){ window.document.attachEvent("onclick" , doCmd); window.document.attachEvent("onmouseover" , buttonOver); window.document.attachEvent("onmouseout" , buttonOut); window.document.attachEvent("onmousedown" , buttonDown); window.document.attachEvent("onmouseup" , buttonUp); window.document.attachEvent("ondblclick" ,   function()   {     var obj = window.event.srcElement;     if(obj.tagName.toLowerCase() == "span"  &&  obj.parentNode.className.replace(/Ctable/ig,"star") == "star" )     {      var mydate = new dataObj(obj.id.split("-")[0] ,  obj.id.split("-")[1] ,  obj.id.split("-")[2] );      window.returnValue = mydate.getDateString(userFormatString)      window.close();     }   } ); document.all.titleYear.innerHTML=TranYearMonthTitle(Nyear,Nmonth); document.all.weekNameBox.insertAdjacentHTML("afterBegin",makeWeekNameHtmlStr()); document.all.calendarBox.innerHTML=makeCalendarHtmlStr(Nyear,Nmonth); window.currentSelectDate = starCaTran(Nyear,Nmonth,Ndate); window.document.all.calendarBox.show = show; window.currentActiveItem = window.document.getElementById(currentSelectDate); if( window.currentActiveItem )  window.currentActiveItem.click(); window.document.all.calendarBox.show();}function starCalendar(year,month){ this.year = year; this.month = month; this.monthTable = function(){    var aMonth=new Array();    for(i=1;i<7;i++)aMonth[i]=new Array(i);        var dCalDate=new Date(this.year, this.month-1, 1);    var iDayOfFirst=dCalDate.getDay();    var iDaysInMonth=new Date(this.year, this.month, 0).getDate();    var iOffsetLast=new Date(this.year, this.month-1, 0).getDate()-iDayOfFirst+1;    var iDate = 1;    var iNext = 1;    for (d = 0; d < 7; d++)    aMonth[1][d] = (d<iDayOfFirst)?(-iDayOfFirst+d+1):iDate++;    for (w = 2; w < 7; w++)   for (d = 0; d < 7; d++)    aMonth[w][d] = iDate++;    return aMonth; }}function makeWeekNameHtmlStr(){ var tmpStr=""; var weekName = ["日","一","二","三","四","五","六"]; for(var i=0;i<7;i++)tmpStr+="<span class=weekName>"+weekName[i]+"</span>"; return tmpStr;}function makeCalendarHtmlStr(year,month){ window.theCalendar = new starCalendar(year,month); var theCaArr = theCalendar.monthTable(); var theDaysInMonth = new Date(year, month, 0).getDate(); var theCaHtml = "<div class=Ctable>"; for(var i=1;i<7;i++)  for(var j=0;j<7;j++)   theCaHtml = theCaHtml+"<span class="+( (theCaArr[i][j]<1 || theCaArr[i][j]>theDaysInMonth)?"OtherMonthDate":"Cdate")+" id="+starCaTran(year,month,theCaArr[i][j])+">"+starCaTran(year,month,theCaArr[i][j]).split("-")[2]+"</span>"; return theCaHtml+"</div>";}function starCaTran(year,month,date){ with(new Date(year,month-1,date))  return getYear() + "-" +(getMonth()+1) + "-" + getDate();}function TranYearMonthTitle(year,month){ with(new Date(year,month-1,1))  return "<span style='text-decoration:underline;cursor:hand;font-weight:bold;padding:1 2 0 1;width:40px;' onclick=showMore(1940,2050,this.innerHTML) onmouseover=\"this.runtimeStyle.cssText='color:#fff;'\" onmouseout=\"this.runtimeStyle.cssText=''\" onpropertychange=showC()>" + getYear() + "</span>" + "年" + "<span style='text-decoration:underline;cursor:hand;font-weight:bold;padding:1 2 0 1;width:20px;' onclick=showMore(1,12,this.innerHTML) onmouseover=\"this.runtimeStyle.cssText='color:#fff;'\" onmouseout=\"this.runtimeStyle.cssText=''\" onpropertychange=showC()>" + (getMonth()+1) + "</span>" + "月" ;}function showC(){   if(event.propertyName != "innerHTML")return;   window.theCalendar.year = new Number(document.all.titleYear.getElementsByTagName("span")[0].innerHTML);   window.theCalendar.month =  new Number(document.all.titleYear.getElementsByTagName("span")[1].innerHTML);   window.document.all.calendarBox.innerHTML=makeCalendarHtmlStr(window.theCalendar.year,window.theCalendar.month);   window.document.all.calendarBox.show = show;window.document.all.calendarBox.show();}function showMore(starNum,endNum,selectedValue){ var obj = window.event.srcElement; var selectedIndex = selectedValue - starNum; if(obj.selectBox){  obj.selectBox.selectedIndex = selectedIndex;  return obj.selectBox.show(document.all.calendarBox.offsetHeight + document.all.weekNameBox.offsetHeight ); } var selectBox = window.document.createElement("div"); selectBox.className = "selectBox"; selectBox.style.height = 0; selectBox.style.top = window.event.clientY - window.event.offsetY + window.event.srcElement.offsetHeight; selectBox.style.left = window.event.clientX - window.event.offsetX ; selectBox.show  = showBox; selectBox.selectedIndex = selectedIndex; selectBox.onclick = function(){  var selectedObj = window.event.srcElement;  if( "nobr" == selectedObj.tagName.toLowerCase() && selectBox.contains(selectedObj))  {   if(obj.innerHTML != selectedObj.innerHTML)obj.innerHTML = selectedObj.innerHTML;  } } selectBox.onlosecapture = alert var iString = ""; for(var i=starNum;i<=endNum;i++){  iString += "<nobr  onmouseover=\"this.parentNode.getElementsByTagName('nobr')[this.parentNode.selectedIndex].style.cssText='';this.style.cssText='background-color:#00006C;color:#fff;'\"  onmouseout=this.style.cssText=''>"+i+"</nobr><br>"  } selectBox.insertAdjacentHTML ("afterBegin",iString); window.document.body.appendChild(selectBox); obj.selectBox = selectBox; obj.selectBox.show(document.all.calendarBox.offsetHeight + document.all.weekNameBox.offsetHeight ); }function showBox(iHeight){ var box = this; box.style.height =1; box.style.display = "block"; window.clearInterval(box.timeHandle); box.timeHandle = window.setInterval(interValHandle,1); var s = 0,t =1 ; function interValHandle() {  box.scrollTop=1000000;  s = s + t*t;  t += 0.5;  box.style.height = parseInt(box.style.height) + Math.floor(s);  box.style.width = 65 / iHeight * box.offsetHeight;  if( box.offsetHeight > iHeight )  {    window.clearInterval(box.timeHandle);    box.style.height = iHeight;    box.scrollTop = box.childNodes[0].offsetHeight*box.selectedIndex;    box.getElementsByTagName("nobr")[box.selectedIndex].style.cssText='background-color:#00006C;color:#fff;';    window.document.attachEvent("onclick",       box.hide=function()       {        box.style.display = "none";        window.document.detachEvent("onclick",box.hide)       }    );  } }}</script><script>function buttonOver(){ var obj = window.event.srcElement; if(obj.tagName.toLowerCase() == "span"  &&  obj.className.replace(/controlButton/ig,"star") == "star" ) {  obj.runtimeStyle.cssText="border-color:#fff #606060 #808080 #fff;padding:3 0 0 0 "; } if(obj.tagName.toLowerCase() == "span"  &&  obj.parentNode.className.replace(/Ctable/ig,"star") == "star" ) {  obj.style.backgroundColor = "#fff"; }}function buttonOut(){ var obj = window.event.srcElement; if(obj.tagName.toLowerCase() == "span"  &&  obj.className.replace(/controlButton/ig,"star") == "star" ) {  obj.runtimeStyle.cssText = ""; } if(obj.tagName.toLowerCase() == "span"  &&  obj.parentNode.className.replace(/Ctable/ig,"star") == "star" ) {  window.setTimeout(function(){obj.style.backgroundColor = ""; },300); }}function buttonDown(){ var obj = window.event.srcElement; if(obj.tagName.toLowerCase() == "span"  &&  obj.className.replace(/controlButton/ig,"star") == "star" ) {  obj.setCapture();  obj.runtimeStyle.borderColor="#808080 #fefefe #fefefe #808080"; }}function buttonUp(){ var obj = window.event.srcElement; if(obj.tagName.toLowerCase() == "span"  && obj.className.replace(/controlButton/ig,"star") == "star" ) {  obj.releaseCapture();  obj.runtimeStyle.cssText =""; }}function doCmd(){ var obj = window.event.srcElement; if(obj.tagName.toLowerCase() == "span"  && obj.className.replace(/controlButton/ig,"star") == "star" ) {   switch(obj.getAttribute("cmd"))   {    case "py":     window.document.all.titleYear.innerHTML=window.TranYearMonthTitle(window.theCalendar.year-1,window.theCalendar.month);     window.document.all.calendarBox.innerHTML=makeCalendarHtmlStr(window.theCalendar.year-1,window.theCalendar.month);     break;    case "pm":     window.document.all.titleYear.innerHTML=window.TranYearMonthTitle(window.theCalendar.year,window.theCalendar.month-1);     window.document.all.calendarBox.innerHTML=makeCalendarHtmlStr(window.theCalendar.year,window.theCalendar.month-1);     break;    case "nm":     window.document.all.titleYear.innerHTML=window.TranYearMonthTitle(window.theCalendar.year,window.theCalendar.month+1);     window.document.all.calendarBox.innerHTML=makeCalendarHtmlStr(window.theCalendar.year,window.theCalendar.month+1);     break;    case "ny":     window.document.all.titleYear.innerHTML=window.TranYearMonthTitle(window.theCalendar.year+1,window.theCalendar.month);     window.document.all.calendarBox.innerHTML=makeCalendarHtmlStr(window.theCalendar.year+1,window.theCalendar.month);     break;   }   window.document.all.calendarBox.show();   window.currentSelectDate = starCaTran(Nyear,Nmonth,Ndate);   window.currentActiveItem = window.document.getElementById(currentSelectDate);   if( window.currentActiveItem )window.currentActiveItem.runtimeStyle.cssText = "background:url(choiceit.gif) no-repeat 12px 6px;color:#000;padding-top:1px;font-weight:bold"; }}function show(){ var box = this; window.clearTimeout(box.timeHandle); var CdateBoxs = this.getElementsByTagName("span"); for(var i=0;i<CdateBoxs.length;i++) {  CdateBoxs[i].defaultValue = new Number( CdateBoxs[i].innerHTML );  CdateBoxs[i].innerHTML = 0; } showDate(); function showDate(){  for(var i=0;i<CdateBoxs.length;i++){   if( new Number( CdateBoxs[i].innerHTML ) + 1 <= new Number( CdateBoxs[i].defaultValue ) )    CdateBoxs[i].innerHTML = new Number( CdateBoxs[i].innerHTML ) + 1   }  box.timeHandle = window.setTimeout(showDate,1); }this.show = show1}function show1(){ var box = this; window.clearTimeout(box.timeHandle); var CdateBoxs = this.getElementsByTagName("span"); for(var i=0;i<CdateBoxs.length;i++)CdateBoxs[i].style.display = "none"; showDate(CdateBoxs[0]); function showDate(obj){  if( !obj )return;  obj.style.display = "inline";  box.timeHandle = window.setTimeout(function(){showDate(obj.nextSibling);},1); }this.show = show}/*function show(){}*/</script><style>*{ font:12px; letter-spacing:0px;}body{ background-color:#E5E9F2; overflow:hidden; margin:0; border:0px;}#titleYear{ text-align:center; padding-top:3px; width:120px; height:20px; border:solid #E5E9F2; border-width:0px 1px 1px 0px; background-color:#A4B9D7; color:#000; cursor:default;}#weekNameBox{ width:282px; border-bottom:0;}.weekName{ text-align:center; padding-top:4px; width:40px; height:20px; border:solid #E5E9F2; border-width:0px 1px 1px 0px; background-color:#C0D0E8; color:#243F65; cursor:default;}.controlButton{ font-family: Webdings; font:9px; text-align:center; padding-top:2px; width:40px; height:20px; border:solid #E5E9F2; border-width:0px 1px 1px 0px; background-color:#A4B9D7; color:#243F65; cursor:default;}.Ctable{ width:282px; margin-bottom:20px;}.Ctable span{ font:9px verdana; font-weight:bold; color:#243F65; text-align:center; padding-top:4px; width:40px; height:26px; border:solid #C0D0E8; border-width:0px 1px 1px 0px; cursor:default;}.Cdate{ background-color:#E5E9F2;}.Ctable span.OtherMonthDate{ color:#999; background-color:#f6f6f6;}.selectBox{ cursor:hand; font:9px verdana; width:80px; position:absolute; border:1px solid #425E87; overflow-y:scroll; overflow-x:hidden; background-color:#fff; FILTER:progid:DXImageTransform.Microsoft.Shadow(Color=#999999,offX=10,offY=10,direction=120,Strength=5); SCROLLBAR-FACE-COLOR: #E5E9F2; SCROLLBAR-HIGHLIGHT-COLOR: #E5E9F2; SCROLLBAR-SHADOW-COLOR: #A4B9D7;  SCROLLBAR-3DLIGHT-COLOR: #A4B9D7;  SCROLLBAR-ARROW-COLOR:  #000000;  SCROLLBAR-TRACK-COLOR: #eeeee6;  SCROLLBAR-DARKSHADOW-COLOR: #ffffff;}.selectBox nobr{ padding:0px 0px 2px 5px; width:100%; color:#000; letter-spacing:2px; text-decoration:none;}</style><body onselectstart="return false"><div style="margin:0 0 0 0"><div id=controlBar><span class=controlButton cmd=py title=上一年>33</span><span class=controlButton cmd=pm title=上一月>3</span><span id=titleYear></span><span class=controlButton  cmd=nm title=下一月>4</span><span class=controlButton cmd=ny title=下一年>44</span></div><div id=weekNameBox></div><div id=calendarBox></div></div></body>
样式四:
<style type="text/css">body { background-color: #D4D0C8;}.m_fieldset { padding: 0,10,5,10; text-align: center; width: 150px;}.m_legend { font-family: Tahoma; font-size: 11px; padding-bottom: 5px;}.m_frameborder { border-left: 2px inset #D4D0C8; border-top: 2px inset #D4D0C8; border-right: 2px inset #FFFFFF; border-bottom: 2px inset #FFFFFF; width: 100px; height: 19px; background-color: #FFFFFF; overflow: hidden; text-align: right; font-family: "Tahoma"; font-size: 10px;}.m_arrow { width: 16px; height: 8px; font-family: "Webdings"; font-size: 7px; line-height: 2px; padding-left: 2px; cursor: default;}.m_input { width: 18px; height: 14px; border: 0px solid black; font-family: "Tahoma"; font-size: 9px; text-align: right; ime-mode:disabled;}</style><script language="javascript">// Written by cloudchen, 2004/03/15function minute(name,fName){ this.name = name; this.fName = fName || "m_input"; this.timer = null; this.fObj = null;  this.toString = function() {  var objDate = new Date();  var sMinute_Common = "class=\"m_input\" maxlength=\"2\" name=\""+this.fName+"\" onfocus=\""+this.name+".setFocusObj(this)\" onblur=\""+this.name+".setTime(this)\" onkeyup=\""+this.name+".prevent(this)\" onkeypress=\"if (!/[0-9]/.test(String.fromCharCode(event.keyCode)))event.keyCode=0\" onpaste=\"return false\" ondragenter=\"return false\"";  var sButton_Common = "class=\"m_arrow\" onfocus=\"this.blur()\" onmouseup=\""+this.name+".controlTime()\" disabled"  var str = "";  str += "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">"  str += "<tr>"  str += "<td>"  str += "<div class=\"m_frameborder\">"  str += "<input radix=\"24\" value=\""+this.formatTime(objDate.getHours())+"\" "+sMinute_Common+">:"  str += "<input radix=\"60\" value=\""+this.formatTime(objDate.getMinutes())+"\" "+sMinute_Common+">:"  str += "<input radix=\"60\" value=\""+this.formatTime(objDate.getSeconds())+"\" "+sMinute_Common+">"  str += "</div>"  str += "</td>"  str += "<td>"  str += "<table border=\"0\" cellspacing=\"2\" cellpadding=\"0\">"  str += "<tr><td><button id=\""+this.fName+"_up\" "+sButton_Common+">5</button></td></tr>"  str += "<tr><td><button id=\""+this.fName+"_down\" "+sButton_Common+">6</button></td></tr>"  str += "</table>"  str += "</td>"  str += "</tr>"  str += "</table>"  return str; } this.play = function() {  this.timer = setInterval(this.name+".playback()",1000); } this.formatTime = function(sTime) {  sTime = ("0"+sTime);  return sTime.substr(sTime.length-2); } this.playback = function() {  var objDate = new Date();  var arrDate = [objDate.getHours(),objDate.getMinutes(),objDate.getSeconds()];  var objMinute = document.getElementsByName(this.fName);  for (var i=0;i<objMinute.length;i++)  {   objMinute[i].value = this.formatTime(arrDate[i])  } } this.prevent = function(obj) {  clearInterval(this.timer);  this.setFocusObj(obj);  var value = parseInt(obj.value,10);  var radix = parseInt(obj.radix,10)-1;  if (obj.value>radix||obj.value<0)  {   obj.value = obj.value.substr(0,1);  } } this.controlTime = function(cmd) {  event.cancelBubble = true;  if (!this.fObj) return;  clearInterval(this.timer);  var cmd = event.srcElement.innerText=="5"?true:false;  var i = parseInt(this.fObj.value,10);  var radix = parseInt(this.fObj.radix,10)-1;  if (i==radix&&cmd)  {   i = 0;  }  else if (i==0&&!cmd)  {   i = radix;  }  else  {   cmd?i++:i--;  }  this.fObj.value = this.formatTime(i);  this.fObj.select(); } this.setTime = function(obj) {  obj.value = this.formatTime(obj.value); } this.setFocusObj = function(obj) {  eval(this.fName+"_up").disabled = eval(this.fName+"_down").disabled = false;  this.fObj = obj; } this.getTime = function() {  var arrTime = new Array(2);  for (var i=0;i<document.getElementsByName(this.fName).length;i++)  {   arrTime[i] = document.getElementsByName(this.fName)[i].value;  }  return arrTime.join(":"); }}</script><style type="text/css">body { background-color: #D4D0C8;}.c_fieldset { padding: 0,10,5,10; text-align: center; width: 180px;}.c_legend { font-family: Tahoma; font-size: 11px; padding-bottom: 5px;}.c_frameborder { border-left: 2px inset #D4D0C8; border-top: 2px inset #D4D0C8; border-right: 2px inset #FFFFFF; border-bottom: 2px inset #FFFFFF; background-color: #FFFFFF; overflow: hidden; font-family: "Tahoma"; font-size: 10px; width:160px; height:120px;}.c_frameborder td { width: 23px; height: 16px; font-family: "Tahoma"; font-size: 11px; text-align: center; cursor: default;}.c_frameborder .selected { background-color:#0A246A; width:12px; height:12px; color:white;}.c_frameborder span { width:12px; height:12px;}.c_arrow { width: 16px; height: 8px; font-family: "Webdings"; font-size: 7px; line-height: 2px; padding-left: 2px; cursor: default;}.c_year { font-family: "Tahoma"; font-size: 11px; cursor: default; width:55px; height:19px;}.c_month { width:75px; height:20px; font:11px "Tahoma";}.c_dateHead { background-color:#808080; color:#D4D0C8;}</style><script language="javascript">// Written by cloudchen, 2004/03/16function calendar(name,fName){ this.name = name; this.fName = fName || "calendar"; this.year = new Date().getFullYear(); this.month = new Date().getMonth(); this.date = new Date().getDate(); //private this.toString = function() {  var str = "";  str += "<table border=\"0\" cellspacing=\"3\" cellpadding=\"0\" onselectstart=\"return false\">";  str += "<tr>";  str += "<td>";  str += this.drawMonth();  str += "</td>";  str += "<td align=\"right\">";  str += this.drawYear();  str += "</td>";  str += "</tr>";  str += "<tr>";  str += "<td colspan=\"2\">";  str += "<div class=\"c_frameborder\">";  str += "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" class=\"c_dateHead\">";  str += "<tr>";  str += "<td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td>";  str += "</tr>";  str += "</table>";  str += this.drawDate();  str += "</div>";  str += "</td>";  str += "</tr>";  str += "</table>";  return str; } //private this.drawYear = function() {  var str = "";  str += "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">";  str += "<tr>";  str += "<td>";  str += "<input class=\"c_year\" maxlength=\"4\" value=\""+this.year+"\" name=\""+this.fName+"\" id=\""+this.fName+"_year\" readonly>";  //DateField  str += "<input type=\"hidden\" name=\""+this.fName+"\" value=\""+this.date+"\" id=\""+this.fName+"_date\">";  str += "</td>";  str += "<td>";  str += "<table cellspacing=\"2\" cellpadding=\"0\" border=\"0\">";  str += "<tr>";  str += "<td><button class=\"c_arrow\" onfocus=\"this.blur()\" onclick=\"event.cancelBubble=true;document.getElementById('"+this.fName+"_year').value++;"+this.name+".redrawDate()\">5</button></td>";  str += "</tr>";  str += "<tr>";  str += "<td><button class=\"c_arrow\" onfocus=\"this.blur()\" onclick=\"event.cancelBubble=true;document.getElementById('"+this.fName+"_year').value--;"+this.name+".redrawDate()\">6</button></td>";  str += "</tr>";  str += "</table>";  str += "</td>";  str += "</tr>";  str += "</table>";  return str; } //priavate this.drawMonth = function() {  var aMonthName = ["一","二","三","四","五","六","七","八","九","十","十一","十二"];  var str = "";  str += "<select class=\"c_month\" name=\""+this.fName+"\" id=\""+this.fName+"_month\" onchange=\""+this.name+".redrawDate()\">";  for (var i=0;i<aMonthName.length;i++) {   str += "<option value=\""+(i+1)+"\" "+(i==this.month?"selected":"")+">"+aMonthName[i]+"月</option>";  }  str += "</select>";  return str; } //private this.drawDate = function() {  var str = "";  var fDay = new Date(this.year,this.month,1).getDay();  var fDate = 1-fDay;  var lDay = new Date(this.year,this.month+1,0).getDay();  var lDate = new Date(this.year,this.month+1,0).getDate();  str += "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" id=\""+this.fName+"_dateTable"+"\">";  for (var i=1,j=fDate;i<7;i++)  {   str += "<tr>";   for (var k=0;k<7;k++)   {    str += "<td><span"+(j==this.date?" class=\"selected\"":"")+" onclick=\""+this.name+".redrawDate(this.innerText)\">"+(isDate(j++))+"</span></td>";   }   str += "</tr>";  }  str += "</table>";  return str;  function isDate(n)  {   return (n>=1&&n<=lDate)?n:"";  } } //public this.redrawDate = function(d) {  this.year = document.getElementById(this.fName+"_year").value;  this.month = document.getElementById(this.fName+"_month").value-1;  this.date = d || this.date;  document.getElementById(this.fName+"_year").value = this.year;  document.getElementById(this.fName+"_month").selectedIndex = this.month;  document.getElementById(this.fName+"_date").value = this.date;  if (this.date>new Date(this.year,this.month+1,0).getDate()) this.date = new Date(this.year,this.month+1,0).getDate();  document.getElementById(this.fName+"_dateTable").outerHTML = this.drawDate(); } //public this.getDate = function(delimiter) {  if (!delimiter) delimiter = "/";  var aValue = [this.year,(this.month+1),this.date];  return aValue.join(delimiter); }}</script><table border="0"><tr><td><fieldset class="c_fieldset"><legend class="c_legend">日期(T)</legend><!-- 调用日历 --><script>var c = new calendar("c");document.write(c);</script><!-- 调用日历 --></fieldset></td><td valign="top"><fieldset class="m_fieldset"><legend class="m_legend">时间(T)</legend><!-- 调用时间钟 --><script>var m = new minute("m");m.play();document.write(m);</script><!-- 调用时间钟 --></fieldset></td></tr><tr><td colspan="2"><button  style="font:8px Webdings;width:15px;height:15px;line-height:6px;">4</button><button style="font:10px Arial;height:15px;height:16px;border:0px;" >GetDate</button><button  style="font:8px Webdings;width:15px;height:15px;line-height:6px;">4</button><button style="font:10px Arial;height:15px;height:16px;border:0px;" >GetTime</button></td></tr></table>