baby69yy2000 发表于 2013-1-27 05:32:42

4个很不错的日历代码

样式一:
<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; } 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.cells.length;intDay++)   {    var cell = caltable.rows.cells;    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 + "</TD>");    for (var intLoop = 1; intLoop < days.length-1;intLoop++)   document.write("<TD class=DayTitle id=diary>" + days + "</TD>");   document.write("<TD class=DaySatTitle id=diary>" + days + "</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><ScriptLANGUAGE="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+"</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.childNodes,this.year,this.month)}function subYear(obj)//减小年份{var myObj=obj.parentNode.parentNode.parentNode.cells.childNodes;myObj.innerHTML=eval(myObj.innerHTML)-1;dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj.innerHTML),eval(myObj.innerHTML))}function addYear(obj)//增加年份{var myObj=obj.parentNode.parentNode.parentNode.cells.childNodes;myObj.innerHTML=eval(myObj.innerHTML)+1;dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj.innerHTML),eval(myObj.innerHTML))}function subMonth(obj)//减小月份{var myObj=obj.parentNode.parentNode.parentNode.cells.childNodes;var month=eval(myObj.innerHTML)-1;if(month==0){    month=12;    subYear(obj);}myObj.innerHTML=month;dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj.innerHTML),eval(myObj.innerHTML))}function addMonth(obj)//增加月份{var myObj=obj.parentNode.parentNode.parentNode.cells.childNodes;var month=eval(myObj.innerHTML)+1;if(month==13){    month=1;    addYear(obj);}myObj.innerHTML=month;dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj.innerHTML),eval(myObj.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.innerHTML='';    obj.cells.style.color='';    obj.cells.className='';}for(i=0;i<length;i++){    obj.cells.innerHTML=(i+1);    if(year==today.getFullYear()&&(month-1)==today.getMonth()&&(i+1)==today.getDate())      obj.cells.style.color='red';    if(year==eval(selectDate)&&month==eval(selectDate)&&(i+1)==eval(selectDate))      obj.cells.className='ds_border2';}}function getvalue(obj,inputObj)//把选择的日期传给输入框{var myObj=inputObj.nextSibling.nextSibling.childNodes.childNodes.cells.childNodes;if(obj.innerHTML)    inputObj.value=myObj.innerHTML+"-"+myObj.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.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 .sjz2003-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("-");Nmonth = obj.id.split("-");Ndate = obj.id.split("-");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("-") ,obj.id.split("-") ,obj.id.split("-") );      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=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 = (d<iDayOfFirst)?(-iDayOfFirst+d+1):iDate++;    for (w = 2; w < 7; w++)   for (d = 0; d < 7; d++)    aMonth = iDate++;    return aMonth; }}function makeWeekNameHtmlStr(){ var tmpStr=""; var weekName = ["日","一","二","三","四","五","六"]; for(var i=0;i<7;i++)tmpStr+="<span class=weekName>"+weekName+"</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<1 || theCaArr>theDaysInMonth)?"OtherMonthDate":"Cdate")+" id="+starCaTran(year,month,theCaArr)+">"+starCaTran(year,month,theCaArr).split("-")+"</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").innerHTML);   window.theCalendar.month =new Number(document.all.titleYear.getElementsByTagName("span").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 += "<nobronmouseover=\"this.parentNode.getElementsByTagName('nobr').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.offsetHeight*box.selectedIndex;    box.getElementsByTagName("nobr").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.defaultValue = new Number( CdateBoxs.innerHTML );CdateBoxs.innerHTML = 0; } showDate(); function showDate(){for(var i=0;i<CdateBoxs.length;i++){   if( new Number( CdateBoxs.innerHTML ) + 1 <= new Number( CdateBoxs.defaultValue ) )    CdateBoxs.innerHTML = new Number( CdateBoxs.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.style.display = "none"; showDate(CdateBoxs); 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=controlButtoncmd=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 (!//.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 = ;var objMinute = document.getElementsByName(this.fName);for (var i=0;i<objMinute.length;i++){   objMinute.value = this.formatTime(arrDate)} } 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 = document.getElementsByName(this.fName).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>";//DateFieldstr += "<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+"月</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 = ;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"><buttonstyle="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><buttonstyle="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>
页: [1]
查看完整版本: 4个很不错的日历代码