经典日历

灰色日历
  1<style type="text/css">
  2.body,td{}{
  3font-family:"Arial";
  4font-size:8pt;
  5color:#000000;
  6}
  7.TrOut{}{
  8background:#dddddd;
  9height:26;
 10border:1 solid #999999;
 11border-top-color:#f4f4f4;
 12border-left-color:#f4f4f4;
 13}
 14.TdOver{}{
 15background:#eeeeee;
 16height:20;
 17border:1 solid #ffffff;
 18border-top-color:#9c9c9c;
 19border-left-color:#9c9c9c;
 20}
 21.TdOut{}{
 22background:#eeeeee;
 23height:20;
 24border:1 solid #9c9c9c;
 25border-top-color:#ffffff;
 26border-left-color:#ffffff;
 27}
 28</style>
 29<script language="JScript">
 30/**//*********************************************************
 31
 32函数 TableFunction 提供以下方法和属性:
 33
 341.GetDateStr()
 35返回指定年月的日期的数组,包括空字符.
 36参数:
 37y是指年
 38m是指月
 39调用方式:TableFunction().GetDateStr(Year,Month)
 40
 412.GetTableStr()
 42返回指定年月的已经格式化了的表格
 43参数:
 44y是指年
 45m是指月
 46调用方式:TableFunction().GetTableStr(Year,Month)
 47
 483.WriteSelect()
 49返回年月的选择框
 50参数:
 51obj是指需要加入选择框的容器
 52values是指需要加亮的项目
 53action是指参数,带入参数y表示是年选择框,带入参数m表示月选择框
 54getobj是指在哪个控件上触发的事件,其中true为非当前选择框触发
 55而false则为当前选择框触发
 56调用方式:TableFunction().WriteSelect(obj,values,action,getobj)
 57
 584.RewriteTableStr()
 59复位重写表格中的日期
 60参数:
 61y是指年
 62m是指月
 63调用方式:TableFunction().RewriteTableStr(Year,Month)
 64
 655.JumpToRun()
 66左右控制表格中的月变化
 67参数:
 68action表示日历是前进还是后退
 69调用方式:TableFunction().JumpToRun(action)
 70
 716.AlertDay()
 72提示当前点击的位置的日期
 73参数:
 74无
 75调用方式:TableFunction().AlertDay()
 76*********************************************************/
 77function TableFunction(){
 78 this.GetDateStr=function(y,m){
 79 this.DayArray=[];
 80 for(var i=0;i<42;i++)this.DayArray[i]=" ";
 81 for(var i=0;i<new Date(y,m,0).getDate();i++)this.DayArray[i+new Date(y,m-1,1).getDay()]=i+1;
 82 return this.DayArray;
 83 }
 84 this.GetTableStr=function(y,m){
 85 this.DateArray=["日","一","二","三","四","五","六"];
 86 this.DStr="<table oncontextmenu='return false' onselectstart='return false' style='width:160;cursor:default;border:1 solid #9c9c9c;border-right:0;border-bottom:0;filter:progid:dximagetransform.microsoft.dropshadow(color=#e3e3e3,offx=3,offy=3,positive=true)' border='0' cellpadding='0' cellspacing='0'>\n"+
 87 "<tr><td colspan='7' class='TrOut'>"+
 88 "<table width='100%' height='100%'border='0' cellpadding='0' cellspacing='0'><tr align='center'>\n"+
 89 "<td width='20' style='font-family:\"webdings\";font-size:9pt' onclick='TableFunction().JumpToRun(\"b\")' onmouseover='this.style.color=\"#ff9900\"' onmouseout='this.style.color=\"\"'>3</td>\n"+
 90 "<td id='YearTD' width='70' onmouseover='this.style.background=\"#cccccc\"' onmouseout='this.style.background=\"\"' onclick='TableFunction().WriteSelect(this,this.innerText.split(\" \")[0],\"y\",false)'>"+y+" 年</td>\n"+
 91 "<td id='MonthTD' width='47' onmouseover='this.style.background=\"#cccccc\"' onmouseout='this.style.background=\"\"' onclick='TableFunction().WriteSelect(this,this.innerText.split(\" \")[0],\"m\",false)'>"+m+" 月</td>\n"+
 92 "<td width='20' style='font-family:\"webdings\";font-size:9pt' onclick='TableFunction().JumpToRun(\"n\")' onmouseover='this.style.color=\"#ff9900\"' onmouseout='this.style.color=\"\"'>4</td></tr></table>\n"+
 93 "</td></tr>\n"+
 94 "<tr align='center'>\n";
 95 for(var i=0;i<7;i++)
 96 this.DStr+="<td class='TrOut'>"+DateArray[i]+"</td>\n";
 97 this.DStr+="</tr>\n";
 98 for(var i=0;i<6;i++){
 99 this.DStr+="<tr align='center'>\n";
100 for(var j=0;j<7;j++){
101 var CS=new Date().getDate()==this.GetDateStr(y,m)[i*7+j]?"TdOver":"TdOut";
102 this.DStr+="<td id='TD' class='"+CS+"' cs='"+CS+"' onmouseover='this.className=\"TdOver\"' onmouseout='if(this.cs!=\"TdOver\")this.className=\"TdOut\"' onclick='TableFunction().AlertDay()'>"+this.GetDateStr(y,m)[i*7+j]+"</td>\n";
103 }
104 this.DStr+="</tr>\n";
105 }
106 this.DStr+="</tabe>";
107 return this.DStr;
108 }
109 this.WriteSelect=function(obj,values,action,getobj){
110 if(values=="")return;
111 if(getobj){
112 obj.innerHTML=values+(action=="y"?" 年":" 月");
113 this.RewriteTableStr(YearTD.innerText.split(" ")[0],MonthTD.innerText.split(" ")[0]);
114 return false;
115 }
116 var StrArray=[];
117 if(action=="y"){
118 for(var i=0;i<15;i++){
119 var year=values-7+i;
120 StrArray[i]="<option value='"+year+"' "+(values==year?"selected":"")+"> "+year+"年</option>\n";
121 }
122 obj.innerHTML="<select id='select1' style='width:67' onchange='TableFunction().WriteSelect(parentElement,this.value,\"y\",true)' onblur='YearTD.innerText=this.value+\" 年\"'>\n"+StrArray.join("")+"</select>";
123 select1.focus();
124 }
125 if(action=="m"){
126 for(var i=1;i<13;i++)
127 StrArray[i]="<option value='"+i+"' "+(i==values?"selected":"")+"> "+i+"月</option>\n";
128 obj.innerHTML="<select id='select2' style='width:47' onchange='TableFunction().WriteSelect(parentElement,this.value,\"m\",true)' onblur='MonthTD.innerText=this.value+\" 月\"'>\n"+StrArray.join("")+"</select>";
129 select2.focus();
130 }
131 }
132 this.RewriteTableStr=function(y,m){
133 var TArray=this.GetDateStr(y,m);
134 var len=TArray.length;
135 for(var i=0;i<len;i++){
136 TD[i].innerHTML=TArray[i];
137 TD[i].className="TdOut";
138 TD[i].cs="TdOut";
139 if(new Date().getYear()==y&&new Date().getMonth()+1==m&&new Date().getDate()==TArray[i]){
140 TD[i].className="TdOver";
141 TD[i].cs="TdOver";
142 }
143 }
144 }
145 this.JumpToRun=function(action){
146 var YearNO=YearTD.innerText.split(' ')[0];
147 var MonthNO=MonthTD.innerText.split(' ')[0];
148 if(action=="b"){
149 if(MonthNO=="1"){
150 MonthNO=13;
151 YearNO=YearNO-1;
152 }
153 MonthTD.innerText=MonthNO-1+" 月";
154 YearTD.innerText=YearNO+" 年";
155 this.RewriteTableStr(YearNO,MonthNO-1);
156 }
157 if(action=="n"){
158 if(MonthNO=="12"){
159 MonthNO=0;
160 YearNO=YearNO-(-1);
161 }
162 YearTD.innerText=YearNO+" 年";
163 MonthTD.innerText=MonthNO-(-1)+" 月";
164 this.RewriteTableStr(YearNO,MonthNO-(-1));
165 }
166 }
167 this.AlertDay=function(){
168 if(event.srcElement.innerText!=" ")
169 alert(YearTD.innerText.split(' ')[0]+"年"+MonthTD.innerText.split(' ')[0]+"月"+event.srcElement.innerText+"日");
170 }
171 return this;
172 }
173document.write(TableFunction().GetTableStr(new Date().getYear(),new Date().getMonth()+1));
174</script>
175

兰色日历
  1<Script LANGUAGE="JavaScript">
  2 var months = new Array("一", "二", "三","四", "五", "六", "七", "八", "九","十", "十一", "十二");
  3 var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31);
  4 var days = new Array("日","一", "二", "三","四", "五", "六");
  5 var classTemp;
  6 var today=new getToday();
  7 var year=today.year;
  8 var month=today.month;
  9 var newCal; 
 10
 11 function getDays(month, year) {
 12 if (1 == month) return ((0 == year % 4) && (0 != (year % 100))) ||(0 == year % 400) ? 29 : 28;
 13 else return daysInMonth[month];
 14 }
 15
 16 function getToday() {
 17 this.now = new Date();
 18 this.year = this.now.getFullYear();
 19 this.month = this.now.getMonth();
 20 this.day = this.now.getDate();
 21 }
 22
 23 function Calendar() {
 24 newCal = new Date(year,month,1);
 25 today = new getToday(); 
 26 var day = -1;
 27 var startDay = newCal.getDay();
 28 var endDay=getDays(newCal.getMonth(), newCal.getFullYear());
 29 var daily = 0;
 30 if ((today.year == newCal.getFullYear()) &&(today.month == newCal.getMonth()))
 31 {
 32 day = today.day;
 33 }
 34 var caltable = document.all.caltable.tBodies.calendar;
 35 var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear());
 36
 37 for (var intWeek = 0; intWeek < caltable.rows.length;intWeek++)
 38 for (var intDay = 0;intDay < caltable.rows[intWeek].cells.length;intDay++)
 39 {
 40 var cell = caltable.rows[intWeek].cells[intDay];
 41 var montemp=(newCal.getMonth()+1)<10?("0"+(newCal.getMonth()+1)):(newCal.getMonth()+1); 
 42 if ((intDay == startDay) && (0 == daily)){ daily = 1;}
 43 var daytemp=daily<10?("0"+daily):(daily);
 44 var d="<"+newCal.getFullYear()+"-"+montemp+"-"+daytemp+">";
 45 if(day==daily) cell.className="DayNow";
 46 else if(intDay==6) cell.className = "DaySat";
 47 else if (intDay==0) cell.className ="DaySun";
 48 else cell.className="Day";
 49 if ((daily > 0) && (daily <= intDaysInMonth))
 50 {
 51 cell.innerText = daily;
 52 daily++;
 53 } else
 54 {
 55 cell.className="CalendarTD";
 56 cell.innerText = "";
 57 }
 58 }
 59 document.all.year.value=year;
 60 document.all.month.value=month+1;
 61 }
 62
 63 function subMonth()
 64 {
 65 if ((month-1)<0)
 66 {
 67 month=11;
 68 year=year-1;
 69 } else
 70 {
 71 month=month-1;
 72 }
 73 Calendar();
 74 }
 75
 76 function addMonth()
 77 {
 78 if((month+1)>11)
 79 {
 80 month=0;
 81 year=year+1;
 82 } else
 83 {
 84 month=month+1;
 85 }
 86 Calendar();
 87 }
 88
 89 function setDate() 
 90 {
 91 if (document.all.month.value<1||document.all.month.value>12)
 92 {
 93 alert("月的有效范围在1-12之间!");
 94 return;
 95 }
 96 year=Math.ceil(document.all.year.value);
 97 month=Math.ceil(document.all.month.value-1);
 98 Calendar();
 99 }
100</Script>
101
102<Script>
103function buttonOver()
104{
105 var obj = window.event.srcElement;
106 obj.runtimeStyle.cssText = "background-color:#FFFFFF";
107// obj.className="Hover";
108}
109
110function buttonOut()
111{
112 var obj = window.event.srcElement;
113 window.setTimeout(function(){obj.runtimeStyle.cssText = "";},300);
114}
115</Script>
116
117<Style>
118Input {}{font-family: verdana;font-size: 9pt;text-decoration: none;background-color: #FFFFFF;height: 20px;border: 1px solid #666666;color:#000000;}
119
120.Calendar {}{font-family: verdana;text-decoration: none;width: 170;background-color: #C0D0E8;font-size: 9pt;border:0px dotted #1C6FA5;}
121.CalendarTD {}{font-family: verdana;font-size: 7pt;color: #000000;background-color:#f6f6f6;height: 20px;width:11%;text-align: center;}
122
123.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;}
124
125.Day {}{font-family: verdana;font-size: 7pt;color:#243F65;background-color: #E5E9F2;height: 20px;width:11%;text-align: center;}
126.DaySat {}{font-family: verdana;font-size: 7pt;color:#FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}
127.DaySun {}{font-family: verdana;font-size: 7pt;color: #FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}
128.DayNow {}{font-family: verdana;font-size: 7pt;font-weight: bold;color: #000000;background-color: #FFFFFF;height: 20px;text-align: center;}
129
130.DayTitle {}{font-family: verdana;font-size: 9pt;color: #000000;background-color: #C0D0E8;height: 20px;width:11%;text-align: center;}
131.DaySatTitle {}{font-family: verdana;font-size: 9pt;color:#FF0000;text-decoration: none;background-color:#C0D0E8;text-align: center;height: 20px;width: 12%;}
132.DaySunTitle {}{font-family: verdana;font-size: 9pt;color: #FF0000;text-decoration: none;background-color: #C0D0E8;text-align: center;height: 20px;width: 12%;}
133
134.DayButton {}{font-family: Webdings;font-size: 9pt;font-weight: bold;color: #243F65;cursor:hand;text-decoration: none;}
135
136</Style>
137
138<table border="0" cellpadding="0" cellspacing="1" class="Calendar" id="caltable">
139<thead>
140 <tr align="center" valign="middle"> 
141 <td colspan="7" class="Title">
142 <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>
143 </td>
144 </tr>
145 <tr align="center" valign="middle"> 
146 <Script LANGUAGE="JavaScript"> 
147 document.write("<TD class=DaySunTitle id=diary >" + days[0] + "</TD>"); 
148 for (var intLoop = 1; intLoop < days.length-1;intLoop++) 
149 document.write("<TD class=DayTitle id=diary>" + days[intLoop] + "</TD>"); 
150 document.write("<TD class=DaySatTitle id=diary>" + days[intLoop] + "</TD>"); 
151 </Script>
152 </TR> 
153</thead>
154<TBODY border=1 cellspacing="0" cellpadding="0" ID="calendar" ALIGN=CENTER ONCLICK="getDiary()">
155 <Script LANGUAGE="JavaScript">
156 for (var intWeeks = 0; intWeeks < 6; intWeeks++)
157 {
158 document.write("<TR style='cursor:hand'>");
159 for (var intDays = 0; intDays < days.length;intDays++) document.write("<TD class=CalendarTD onMouseover='buttonOver();' onMouseOut='buttonOut();'></TD>");
160 document.write("</TR>");
161 } 
162 </Script>
163</TBODY>
164</TABLE>
165<Script LANGUAGE="JavaScript">
166 Calendar();
167</Script>
168