jsp页面开发中的date窗体
时间：2006-12-20 来源：EricJava
昨天突然想做一个自己的日期窗体，就开始着手去做，本来想做成一个标签的后来觉得麻烦就做成了个js的，这里把有关的一些代码贴出来，大家共同研究研究。
js里面的代码：function $(s){return document.getElementById(s);}
var lunarInfo=new Array(
0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2,
0x04ae0,0x0a5b6,0x0a4d0,0x0d250,0x1d255,0x0b540,0x0d6a0,0x0ada2,0x095b0,0x14977,
0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40,0x1ab54,0x02b60,0x09570,0x052f2,0x04970,
0x06566,0x0d4a0,0x0ea50,0x06e95,0x05ad0,0x02b60,0x186e3,0x092e0,0x1c8d7,0x0c950,
0x0d4a0,0x1d8a6,0x0b550,0x056a0,0x1a5b4,0x025d0,0x092d0,0x0d2b2,0x0a950,0x0b557,
0x06ca0,0x0b550,0x15355,0x04da0,0x0a5d0,0x14573,0x052d0,0x0a9a8,0x0e950,0x06aa0,
0x0aea6,0x0ab50,0x04b60,0x0aae4,0x0a570,0x05260,0x0f263,0x0d950,0x05b57,0x056a0,
0x096d0,0x04dd5,0x04ad0,0x0a4d0,0x0d4d4,0x0d250,0x0d558,0x0b540,0x0b5a0,0x195a6,
0x095b0,0x049b0,0x0a974,0x0a4b0,0x0b27a,0x06a50,0x06d40,0x0af46,0x0ab60,0x09570,
0x04af5,0x04970,0x064b0,0x074a3,0x0ea50,0x06b58,0x055c0,0x0ab60,0x096d5,0x092e0,
0x0c960,0x0d954,0x0d4a0,0x0da50,0x07552,0x056a0,0x0abb7,0x025d0,0x092d0,0x0cab5,
0x0a950,0x0b4a0,0x0baa4,0x0ad50,0x055d9,0x04ba0,0x0a5b0,0x15176,0x052b0,0x0a930,
0x07954,0x06aa0,0x0ad50,0x05b52,0x04b60,0x0a6e6,0x0a4e0,0x0d260,0x0ea65,0x0d530,
0x05aa0,0x076a3,0x096d0,0x04bd7,0x04ad0,0x0a4d0,0x1d0b6,0x0d250,0x0d520,0x0dd45,
0x0b5a0,0x056d0,0x055b2,0x049b0,0x0a577,0x0a4b0,0x0aa50,0x1b255,0x06d20,0x0ada0)
var solarMonth=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var Gan=new Array("甲","乙","丙","丁","戊","己","庚","辛","壬","癸");
var Zhi=new Array("子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥");
var Animals=new Array("鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪");
var solarTerm = new Array("小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至")
var sTermInfo = new Array(0,21208,42467,63836,85337,107014,128867,150921,173149,195551,218072,240693,263343,285989,308563,331033,353350,375494,397447,419210,440795,462224,483532,504758)
var nStr1 = new Array('日','一','二','三','四','五','六','七','八','九','十')
var nStr2 = new Array('初','十','廿','卅',' ')
//var monthName = new Array("JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC");
var monthName = new Array("1","2","3","4","5","6","7","8","9","10","11","12"); var sFtv = new Array(
"0101*元旦",
"0214 情人节",
"0308 妇女节",
"0312 植树节",
"0401 愚人节",
"0501 劳动节",
"0504 青年节",
"0512 护士节",
"0601 儿童节",
"0801 建军节",
"0808 父亲节", "0910 教师节",
"1001*国庆节", "1225 圣诞节") var lFtv = new Array(
"0101*春节",
"0115 元宵节",
"0505 端午节",
"0707 七夕节",
"0715 中元节",
"0815 中秋节",
"0909 重阳节",
"1208 腊八节",
"1224 小年",
"0100*除夕") var wFtv = new Array(
"0520 母亲节") function lYearDays(y) {
var i, sum = 348;
for(i=0x8000; i>0x8; i>>=1)sum += (lunarInfo[y-1900]&i)?1:0;
return(sum+leapDays(y))
} function leapDays(y) {
if(leapMonth(y)) return((lunarInfo[y-1900] & 0x10000)? 30: 29)
else return(0)
} function leapMonth(y) {
return(lunarInfo[y-1900] & 0xf)
} function monthDays(y,m) {
return( (lunarInfo[y-1900] & (0x10000>>m))? 30: 29 )
} function Lunar(objDate) { var i, leap=0, temp=0
var baseDate = new Date(1900,0,31)
var offset = (objDate - baseDate)/86400000 this.dayCyl = offset + 40
this.monCyl = 14 for(i=1900; i<2050 && offset>0; i++) {
temp = lYearDays(i)
offset -= temp
this.monCyl += 12
} if(offset<0) {
offset += temp;
i--;
this.monCyl -= 12
} this.year = i
this.yearCyl = i-1864 leap = leapMonth(i)
this.isLeap = false for(i=1; i<13 && offset>0; i++) {
if(leap>0 && i==(leap+1) && this.isLeap==false)
{ --i; this.isLeap = true; temp = leapDays(this.year); }
else
{ temp = monthDays(this.year, i); }
if(this.isLeap==true && i==(leap+1)) this.isLeap = false offset -= temp
if(this.isLeap == false) this.monCyl ++
} if(offset==0 && leap>0 && i==leap+1)
if(this.isLeap)
{ this.isLeap = false; }
else
{ this.isLeap = true; --i; --this.monCyl;} if(offset<0){ offset += temp; --i; --this.monCyl; } this.month = i
this.day = offset + 1
} function solarDays(y,m) {
if(m==1)
return(((y%4 == 0) && (y%100 != 0) || (y%400 == 0))? 29: 28)
else
return(solarMonth[m])
}
function cyclical(num) {
return(Gan[num%10]+Zhi[num%12])
} function calElement(sYear,sMonth,sDay,week,lYear,lMonth,lDay,isLeap,cYear,cMonth,cDay) { this.isToday = false;
this.sYear = sYear;
this.sMonth = sMonth;
this.sDay = sDay;
this.week = week;
this.lYear = lYear;
this.lMonth = lMonth;
this.lDay = lDay;
this.isLeap = isLeap;
this.cYear = cYear;
this.cMonth = cMonth;
this.cDay = cDay; this.color = ''; this.lunarFestival = ''; //农历节日
this.solarFestival = ''; //国历节日
this.solarTerms = ''; //节气 } function sTerm(y,n) {
var offDate = new Date( ( 31556925974.7*(y-1900) + sTermInfo[n]*60000 ) + Date.UTC(1900,0,6,2,5) )
return(offDate.getUTCDate())
} function calendar(y,m) { var sDObj, lDObj, lY, lM, lD=1, lL, lX=0, tmp1, tmp2
var lDPOS = new Array(3)
var n = 0
var firstLM = 0 sDObj = new Date(y,m,1) //当月一日日期 this.length = solarDays(y,m) //国历当月天数
this.firstWeek = sDObj.getDay() //国历当月1日星期几
for(var i=0;i<this.length;i++) { if(lD>lX) {
sDObj = new Date(y,m,i+1) //当月一日日期
lDObj = new Lunar(sDObj) //农历
lY = lDObj.year //农历年
lM = lDObj.month //农历月
lD = lDObj.day //农历日
lL = lDObj.isLeap //农历是否闰月
lX = lL? leapDays(lY): monthDays(lY,lM) //农历当月最後一天 if(n==0) firstLM = lM
lDPOS[n++] = i-lD+1
} //sYear,sMonth,sDay,week,
//lYear,lMonth,lDay,isLeap,
//cYear,cMonth,cDay
this[i] = new calElement(y, m+1, i+1, nStr1[(i+this.firstWeek)%7],
lY, lM, lD++, lL,
cyclical(lDObj.yearCyl) ,cyclical(lDObj.monCyl), cyclical(lDObj.dayCyl++) )
if((i+this.firstWeek)%7==0) this[i].color = '#FF3399' //周日颜色
if((i+this.firstWeek)%14==13) this[i].color = '#FF3399' //周休二日颜色
} tmp1=sTerm(y,m*2 )-1
tmp2=sTerm(y,m*2+1)-1
this[tmp1].solarTerms = solarTerm[m*2]
this[tmp2].solarTerms = solarTerm[m*2+1]
if(m==3) this[tmp1].color = 'red' //清明颜色 for(i in sFtv)
if(sFtv[i].match(/^(\d{2})(\d{2})([\s\*])(.+)$/))
if(Number(RegExp.$1)==(m+1)) {
this[Number(RegExp.$2)-1].solarFestival += RegExp.$4 + ' '
if(RegExp.$3=='*') this[Number(RegExp.$2)-1].color = 'red'
} for(i in wFtv)
if(wFtv[i].match(/^(\d{2})(\d)(\d)([\s\*])(.+)$/))
if(Number(RegExp.$1)==(m+1)) {
tmp1=Number(RegExp.$2)
tmp2=Number(RegExp.$3)
this[((this.firstWeek>tmp2)?7:0) + 7*(tmp1-1) + tmp2 - this.firstWeek].solarFestival += RegExp.$5 + ' '
} //农历节日
for(i in lFtv)
if(lFtv[i].match(/^(\d{2})(.{2})([\s\*])(.+)$/)) {
tmp1=Number(RegExp.$1)-firstLM
if(tmp1==-11) tmp1=1
if(tmp1 >=0 && tmp1<n) {
tmp2 = lDPOS[tmp1] + Number(RegExp.$2) -1
if( tmp2 >= 0 && tmp2<this.length) {
this[tmp2].lunarFestival += RegExp.$4 + ' '
if(RegExp.$3=='*') this[tmp2].color = 'red'
}
}
} //黑色星期五
//if((this.firstWeek+12)%7==5)
// this[12].solarFestival += '黑色星期五 ' //今日
if(y==tY && m==tM) this[tD-1].isToday = true; } //====================== 中文日期
function cDay(d){
var s; switch (d) {
case 10:
s = '初十'; break;
case 20:
s = '二十'; break;
break;
case 30:
s = '三十'; break;
break;
default :
s = nStr2[Math.floor(d/10)];
s += nStr1[d%10];
}
return(s);
} /////////////////////////////////////////////////////////////////////////////// var cld; function drawCld(SY,SM) {
var i,sD,s,size;
var isart;
cld = new calendar(SY,SM); $("GZ").innerHTML = cyclical(SY-1900+36) + '年（'+Animals[(SY-4)%12]+'）'; $("YMBG").innerHTML = SY + "年" + monthName[SM] + "月"; for(i=0;i<42;i++) { sObj=$('SD'+ i);
lObj=$('LD'+ i);
tObj=$('TD'+ i); sObj.className = ''; sD = i - cld.firstWeek; if(sD>-1 && sD<cld.length) {
isart=false;
//是否有文章
//alert(arrArtdate);
//for(i in arrArtdate){
//}
for(j in arrArtdate){
b=arrArtdate[j];
if(b.substring(0,4)==SY&&b.substring(4,6)==SM+1&&b.substring(6,8)==sD+1)isart=true;
}
if(isart)sObj.innerHTML = "<a title='查看"+(sD+1)+"日的文章' href='date_"+SY+"_"+(SM+1)+"_"+(sD+1)+".html'>"+(sD+1)+"</a>";else sObj.innerHTML = sD+1; //if(cld[sD].isToday) sObj.className = 'todyaColor';
if(cld[sD].isToday)tObj.style.background="#E3F3FB";
sObj.style.color = cld[sD].color; if(cld[sD].lDay==1)
lObj.innerHTML = (cld[sD].isLeap?'闰':'') + cld[sD].lMonth + '月' + (monthDays(cld[sD].lYear,cld[sD].lMonth)==29?'小':'大');
else
lObj.innerHTML = cDay(cld[sD].lDay); s=cld[sD].lunarFestival;
sObj.title=s;
if(s.length>0) {
if(s.length>6) s = s.substr(0, 4)+'..';
s = s.fontcolor('#80CAEE');
}
else { //国历节日
s=cld[sD].solarFestival;
sObj.title=s;
if(s.length>0) {
size = (s.charCodeAt(0)>0 && s.charCodeAt(0)<128)?8:4;
if(s.length>size+2) s = s.substr(0, size)+'…';
s = s.fontcolor('#80CAEE');
}
else { //廿四节气
s=cld[sD].solarTerms;
sObj.title=s;
if(s.length>0) s = s.fontcolor('limegreen');
}
}
if(s.length>0) lObj.innerHTML = s;else sObj.title =lObj.innerHTML; }
else { //非日期
sObj.innerHTML = '';
lObj.innerHTML = '';
}
}
} function changeCld() { drawCld(mYear,mMonth);
} function pushBtm(K) {
switch (K){
case 'YU' :
mYear--;
if(mYear<1900)mYear=1900;
break;
case 'YD' :
mYear++;
if(mYear>2050)mYear=2050;
break;
case 'MU' :
mMonth--;
if(mMonth<0){
mMonth=11;
mYear--;
}
break;
case 'MD' :
mMonth++;
if(mMonth>11){
mMonth=0;
mYear++;
}
break;
default : }
changeCld();
} function changeYear()
{ var areaYear= document.getElementById("areaYear").value
mYear = areaYear;
changeCld();
}
function changeMonth()
{ var areaMonth= document.getElementById("areaMonth").value
mMonth = areaMonth - 1;
changeCld();
} var Today = new Date();
var tY = Today.getFullYear();
var tM = Today.getMonth();
var tD = Today.getDate();
var mYear=tY,mMonth=tM;
////////////////////////////////////////////////////////////////////////////// var width = "130";
var offsetx = 2;
var offsety = 16; var x = 0;
var y = 0;
var snow = 0;
var sw = 0;
var cnt = 0; var dStyle;
//显示详细日期资料
function mOvr(v) {
var s,festival;
var sObj=$('SD'+ v);
var d=sObj.innerHTML-1; //sYear,sMonth,sDay,week,
//lYear,lMonth,lDay,isLeap,
//cYear,cMonth,cDay if(sObj.innerHTML!='') { sObj.style.cursor = 's-resize'; if(cld[d].solarTerms == '' && cld[d].solarFestival == '' && cld[d].lunarFestival == '')
festival = '';
else
festival = '<TABLE WIDTH=100% BORDER=0 CELLPADDING=4 CELLSPACING=0 BGCOLOR="#333333"><TR><TD ALIGN="RIGHT">'+
'<FONT style="color:#FFFFFF; font-size:9pt">'+cld[d].solarTerms + ' ' + cld[d].solarFestival + ' ' + cld[d].lunarFestival+'</FONT></TD>'+
'</TR></TABLE>'; s= '<TABLE WIDTH="140" BORDER=0 CELLPADDING="0" CELLSPACING=0 BGCOLOR="#000099"><TR><TD>' +
'<TABLE WIDTH=100% BORDER=0 CELLPADDING=4 CELLSPACING=0><TR><TD ALIGN="RIGHT" nowrap><FONT style="color:#FFFFFF; font-size:9pt">'+
cld[d].sYear+'年 '+cld[d].sMonth+'月 '+cld[d].sDay+'日<br>星期'+cld[d].week+'<br>'+
'<font color="fuchsia">农历'+(cld[d].isLeap?'闰 ':' ')+cld[d].lMonth+'月 '+cld[d].lDay+'日</font><br>'+
'<font color="yellow">'+cld[d].cYear+'年 '+cld[d].cMonth+'月 '+cld[d].cDay + '日</font>'+
'</FONT></TD></TR></TABLE>'+ festival +'</TD></TR></TABLE>';
if (snow == 0) {
dStyle.left = x+offsetx-(width/2);
dStyle.top = y+offsety;
dStyle.visibility = "visible";
snow = 1;
}
}
} //清除详细日期资料
function mOut() {
if ( cnt >= 1 ) { sw = 0 }
if ( sw == 0 )
{ snow = 0;
dStyle.visibility="hidden";}
else cnt++;
} //取得位置
function mEvn() {
x=event.x;
y=event.y;
if (document.body.scrollLeft)
{x=event.x+document.body.scrollLeft; y=event.y+document.body.scrollTop;}
if (snow){
dStyle.left = x+offsetx-(width/2)
dStyle.top = y+offsety
}
} function inputDateYear(changeYear){
var shtml = "<table cellspacing=\"0\" cellpadding=\"0\" width=\"36\" border=\"1\" bordercolor=\"#BBF0FF\">\n";
shtml+=" <tr align=\"center\" bgcolor=\"#80CAEE\" style=\"color:#003399\">\n";
shtml+= "<td><select name=\"areaYear\" onChange=\"changeYear();\">\n";
shtml+= "<OPTION selected value=\n";
shtml+=mYear+">\n";
shtml+=mYear+"</OPTION>\n";
for(j=1900;j<2050;j++) {
if(j != mYear)shtml+="<OPTION value=\n"+j+">\n"+j+"</OPTION>\n";
}
shtml+="年</td></tr>\n"; shtml+="</table>";
document.getElementById(changeYear).innerHTML=shtml;
drawCld(tY,tM);
} function inputDateMonth(changeMonth){
var shtml = "<table cellspacing=\"0\" cellpadding=\"0\" width=\"36\" border=\"1\" bordercolor=\"#BBF0FF\">\n";
shtml+=" <tr align=\"center\" bgcolor=\"#80CAEE\" style=\"color:#003399\">\n";
shtml+= "<td><select name=\"areaMonth\" onChange=\"changeMonth();\">\n";
shtml+= "<OPTION selected value=\n";
shtml+=mMonth+1+">\n";
shtml+=mMonth+1+"</OPTION>\n";
for(j=1;j<13;j++) {
if(j != (mMonth+1))shtml+="<OPTION value=\n"+j+">\n"+j+"</OPTION>\n";
}
shtml+="月</td></tr>\n"; shtml+="</table>";
document.getElementById(changeMonth).innerHTML=shtml;
drawCld(tY,tM);
} function initial(_date) {
var shtml = "<table cellspacing=\"0\" cellpadding=\"0\" width=\"216\" style=\"border-collapse: collapse\" bgcolor=\"#FFFFFF\" border=\"1\" bordercolor=\"#BBF0FF\" id=\"datetable\">\n";
shtml+=" <tr align=\"center\" bgcolor=\"#80CAEE\" style=\"color:#003399\">\n";
shtml+=" <td width=\"32\" height=\"24\">日</td>\n";
shtml+=" <td width=\"32\">一</td>\n";
shtml+=" <td width=\"32\">二</td>\n";
shtml+=" <td width=\"32\">三</td>\n";
shtml+=" <td width=\"32\">四</td>\n";
shtml+=" <td width=\"32\">五</td>\n";
shtml+=" <td width=\"32\">六</td></tr>\n";
for(i=0;i<6;i++) {
shtml+=" <tr align=\"center\">\n";
for(j=0;j<7;j++) {
gNum = i*7+j shtml+=" <td nowrap=\"nowrap\" id=\"TD" + gNum +"\">\n"; shtml+="<font id=\"SD" + gNum +"\" size=\"2\" face=\"Verdana\"";
if(j == 0||j == 6)shtml+=" color=\"#FF3399\"";else shtml+=" color=\"#333333\""
shtml+=" TITLE=\"\"> d</font><br /><font id=\"LD" + gNum + "\" style=\"font-size:7pt\"> f</font></td>"; }
shtml+=" </tr>\n";
}
shtml+="</table>";
document.getElementById(_date).innerHTML=shtml;
drawCld(tY,tM);
} 里面写了不同的方法来供调用。 在JSP里面的代码：
<TABLE
style="BORDER-RIGHT: #bbf0ff 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #bbf0ff 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #bbf0ff 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #bbf0ff 1px solid; BORDER-COLLAPSE: collapse"
cellSpacing=0 cellPadding=0 width=220 bgColor=#ffffff border=0 align="center">
<TBODY>
<TR bgColor=#e3f3fb height=20>
<TD title=上一年 style="FONT-SIZE: 9pt; CURSOR: hand; COLOR: #000066"
onclick="pushBtm('YU')" align=middle width=14>||</TD>
<TD title=上一月 style="FONT-SIZE: 9pt; CURSOR: hand; COLOR: #000066"
onclick="pushBtm('MU')" align=middle width=14><<</TD>
<TD id=YMBG style="FONT-SIZE: 9pt; CURSOR: hand; COLOR: #000066" noWrap
align=middle onclick="test()"></TD>
<TD style="FONT-SIZE: 9pt;COLOR: #000066" noWrap
align=middle >
<DIV id=selectYear align=center></DIV>
</TD>
<TD style="FONT-SIZE: 9pt;COLOR: #000066" noWrap
align=middle >
<DIV id=selectMonth align=center></DIV>
</TD>
<TD id=GZ style="FONT-SIZE: 9pt; COLOR: #000066" noWrap
align=middle></TD>
<TD title=下一月 style="FONT-SIZE: 9pt; CURSOR: hand; COLOR: #000066"
onclick="pushBtm('MD')" align=middle width=14>>></TD>
<TD title=下一年 style="FONT-SIZE: 9pt; CURSOR: hand; COLOR: #000066"
onclick="pushBtm('YD')" align=middle width=24>||</TD></TR>
<TR>
<TD colSpan=6>
<DIV id=ttdiv align=center width="198"></DIV></TD></TR>
<TR>
<TD colSpan=6 height=1></TD></TR></TBODY></TABLE>
里面调用了JS里面的方法，这只是简单的一个窗体界面，有很多地方还需要进一步优化与完善。
0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2,
0x04ae0,0x0a5b6,0x0a4d0,0x0d250,0x1d255,0x0b540,0x0d6a0,0x0ada2,0x095b0,0x14977,
0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40,0x1ab54,0x02b60,0x09570,0x052f2,0x04970,
0x06566,0x0d4a0,0x0ea50,0x06e95,0x05ad0,0x02b60,0x186e3,0x092e0,0x1c8d7,0x0c950,
0x0d4a0,0x1d8a6,0x0b550,0x056a0,0x1a5b4,0x025d0,0x092d0,0x0d2b2,0x0a950,0x0b557,
0x06ca0,0x0b550,0x15355,0x04da0,0x0a5d0,0x14573,0x052d0,0x0a9a8,0x0e950,0x06aa0,
0x0aea6,0x0ab50,0x04b60,0x0aae4,0x0a570,0x05260,0x0f263,0x0d950,0x05b57,0x056a0,
0x096d0,0x04dd5,0x04ad0,0x0a4d0,0x0d4d4,0x0d250,0x0d558,0x0b540,0x0b5a0,0x195a6,
0x095b0,0x049b0,0x0a974,0x0a4b0,0x0b27a,0x06a50,0x06d40,0x0af46,0x0ab60,0x09570,
0x04af5,0x04970,0x064b0,0x074a3,0x0ea50,0x06b58,0x055c0,0x0ab60,0x096d5,0x092e0,
0x0c960,0x0d954,0x0d4a0,0x0da50,0x07552,0x056a0,0x0abb7,0x025d0,0x092d0,0x0cab5,
0x0a950,0x0b4a0,0x0baa4,0x0ad50,0x055d9,0x04ba0,0x0a5b0,0x15176,0x052b0,0x0a930,
0x07954,0x06aa0,0x0ad50,0x05b52,0x04b60,0x0a6e6,0x0a4e0,0x0d260,0x0ea65,0x0d530,
0x05aa0,0x076a3,0x096d0,0x04bd7,0x04ad0,0x0a4d0,0x1d0b6,0x0d250,0x0d520,0x0dd45,
0x0b5a0,0x056d0,0x055b2,0x049b0,0x0a577,0x0a4b0,0x0aa50,0x1b255,0x06d20,0x0ada0)
var solarMonth=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var Gan=new Array("甲","乙","丙","丁","戊","己","庚","辛","壬","癸");
var Zhi=new Array("子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥");
var Animals=new Array("鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪");
var solarTerm = new Array("小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至")
var sTermInfo = new Array(0,21208,42467,63836,85337,107014,128867,150921,173149,195551,218072,240693,263343,285989,308563,331033,353350,375494,397447,419210,440795,462224,483532,504758)
var nStr1 = new Array('日','一','二','三','四','五','六','七','八','九','十')
var nStr2 = new Array('初','十','廿','卅',' ')
//var monthName = new Array("JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC");
var monthName = new Array("1","2","3","4","5","6","7","8","9","10","11","12"); var sFtv = new Array(
"0101*元旦",
"0214 情人节",
"0308 妇女节",
"0312 植树节",
"0401 愚人节",
"0501 劳动节",
"0504 青年节",
"0512 护士节",
"0601 儿童节",
"0801 建军节",
"0808 父亲节", "0910 教师节",
"1001*国庆节", "1225 圣诞节") var lFtv = new Array(
"0101*春节",
"0115 元宵节",
"0505 端午节",
"0707 七夕节",
"0715 中元节",
"0815 中秋节",
"0909 重阳节",
"1208 腊八节",
"1224 小年",
"0100*除夕") var wFtv = new Array(
"0520 母亲节") function lYearDays(y) {
var i, sum = 348;
for(i=0x8000; i>0x8; i>>=1)sum += (lunarInfo[y-1900]&i)?1:0;
return(sum+leapDays(y))
} function leapDays(y) {
if(leapMonth(y)) return((lunarInfo[y-1900] & 0x10000)? 30: 29)
else return(0)
} function leapMonth(y) {
return(lunarInfo[y-1900] & 0xf)
} function monthDays(y,m) {
return( (lunarInfo[y-1900] & (0x10000>>m))? 30: 29 )
} function Lunar(objDate) { var i, leap=0, temp=0
var baseDate = new Date(1900,0,31)
var offset = (objDate - baseDate)/86400000 this.dayCyl = offset + 40
this.monCyl = 14 for(i=1900; i<2050 && offset>0; i++) {
temp = lYearDays(i)
offset -= temp
this.monCyl += 12
} if(offset<0) {
offset += temp;
i--;
this.monCyl -= 12
} this.year = i
this.yearCyl = i-1864 leap = leapMonth(i)
this.isLeap = false for(i=1; i<13 && offset>0; i++) {
if(leap>0 && i==(leap+1) && this.isLeap==false)
{ --i; this.isLeap = true; temp = leapDays(this.year); }
else
{ temp = monthDays(this.year, i); }
if(this.isLeap==true && i==(leap+1)) this.isLeap = false offset -= temp
if(this.isLeap == false) this.monCyl ++
} if(offset==0 && leap>0 && i==leap+1)
if(this.isLeap)
{ this.isLeap = false; }
else
{ this.isLeap = true; --i; --this.monCyl;} if(offset<0){ offset += temp; --i; --this.monCyl; } this.month = i
this.day = offset + 1
} function solarDays(y,m) {
if(m==1)
return(((y%4 == 0) && (y%100 != 0) || (y%400 == 0))? 29: 28)
else
return(solarMonth[m])
}
function cyclical(num) {
return(Gan[num%10]+Zhi[num%12])
} function calElement(sYear,sMonth,sDay,week,lYear,lMonth,lDay,isLeap,cYear,cMonth,cDay) { this.isToday = false;
this.sYear = sYear;
this.sMonth = sMonth;
this.sDay = sDay;
this.week = week;
this.lYear = lYear;
this.lMonth = lMonth;
this.lDay = lDay;
this.isLeap = isLeap;
this.cYear = cYear;
this.cMonth = cMonth;
this.cDay = cDay; this.color = ''; this.lunarFestival = ''; //农历节日
this.solarFestival = ''; //国历节日
this.solarTerms = ''; //节气 } function sTerm(y,n) {
var offDate = new Date( ( 31556925974.7*(y-1900) + sTermInfo[n]*60000 ) + Date.UTC(1900,0,6,2,5) )
return(offDate.getUTCDate())
} function calendar(y,m) { var sDObj, lDObj, lY, lM, lD=1, lL, lX=0, tmp1, tmp2
var lDPOS = new Array(3)
var n = 0
var firstLM = 0 sDObj = new Date(y,m,1) //当月一日日期 this.length = solarDays(y,m) //国历当月天数
this.firstWeek = sDObj.getDay() //国历当月1日星期几
for(var i=0;i<this.length;i++) { if(lD>lX) {
sDObj = new Date(y,m,i+1) //当月一日日期
lDObj = new Lunar(sDObj) //农历
lY = lDObj.year //农历年
lM = lDObj.month //农历月
lD = lDObj.day //农历日
lL = lDObj.isLeap //农历是否闰月
lX = lL? leapDays(lY): monthDays(lY,lM) //农历当月最後一天 if(n==0) firstLM = lM
lDPOS[n++] = i-lD+1
} //sYear,sMonth,sDay,week,
//lYear,lMonth,lDay,isLeap,
//cYear,cMonth,cDay
this[i] = new calElement(y, m+1, i+1, nStr1[(i+this.firstWeek)%7],
lY, lM, lD++, lL,
cyclical(lDObj.yearCyl) ,cyclical(lDObj.monCyl), cyclical(lDObj.dayCyl++) )
if((i+this.firstWeek)%7==0) this[i].color = '#FF3399' //周日颜色
if((i+this.firstWeek)%14==13) this[i].color = '#FF3399' //周休二日颜色
} tmp1=sTerm(y,m*2 )-1
tmp2=sTerm(y,m*2+1)-1
this[tmp1].solarTerms = solarTerm[m*2]
this[tmp2].solarTerms = solarTerm[m*2+1]
if(m==3) this[tmp1].color = 'red' //清明颜色 for(i in sFtv)
if(sFtv[i].match(/^(\d{2})(\d{2})([\s\*])(.+)$/))
if(Number(RegExp.$1)==(m+1)) {
this[Number(RegExp.$2)-1].solarFestival += RegExp.$4 + ' '
if(RegExp.$3=='*') this[Number(RegExp.$2)-1].color = 'red'
} for(i in wFtv)
if(wFtv[i].match(/^(\d{2})(\d)(\d)([\s\*])(.+)$/))
if(Number(RegExp.$1)==(m+1)) {
tmp1=Number(RegExp.$2)
tmp2=Number(RegExp.$3)
this[((this.firstWeek>tmp2)?7:0) + 7*(tmp1-1) + tmp2 - this.firstWeek].solarFestival += RegExp.$5 + ' '
} //农历节日
for(i in lFtv)
if(lFtv[i].match(/^(\d{2})(.{2})([\s\*])(.+)$/)) {
tmp1=Number(RegExp.$1)-firstLM
if(tmp1==-11) tmp1=1
if(tmp1 >=0 && tmp1<n) {
tmp2 = lDPOS[tmp1] + Number(RegExp.$2) -1
if( tmp2 >= 0 && tmp2<this.length) {
this[tmp2].lunarFestival += RegExp.$4 + ' '
if(RegExp.$3=='*') this[tmp2].color = 'red'
}
}
} //黑色星期五
//if((this.firstWeek+12)%7==5)
// this[12].solarFestival += '黑色星期五 ' //今日
if(y==tY && m==tM) this[tD-1].isToday = true; } //====================== 中文日期
function cDay(d){
var s; switch (d) {
case 10:
s = '初十'; break;
case 20:
s = '二十'; break;
break;
case 30:
s = '三十'; break;
break;
default :
s = nStr2[Math.floor(d/10)];
s += nStr1[d%10];
}
return(s);
} /////////////////////////////////////////////////////////////////////////////// var cld; function drawCld(SY,SM) {
var i,sD,s,size;
var isart;
cld = new calendar(SY,SM); $("GZ").innerHTML = cyclical(SY-1900+36) + '年（'+Animals[(SY-4)%12]+'）'; $("YMBG").innerHTML = SY + "年" + monthName[SM] + "月"; for(i=0;i<42;i++) { sObj=$('SD'+ i);
lObj=$('LD'+ i);
tObj=$('TD'+ i); sObj.className = ''; sD = i - cld.firstWeek; if(sD>-1 && sD<cld.length) {
isart=false;
//是否有文章
//alert(arrArtdate);
//for(i in arrArtdate){
//}
for(j in arrArtdate){
b=arrArtdate[j];
if(b.substring(0,4)==SY&&b.substring(4,6)==SM+1&&b.substring(6,8)==sD+1)isart=true;
}
if(isart)sObj.innerHTML = "<a title='查看"+(sD+1)+"日的文章' href='date_"+SY+"_"+(SM+1)+"_"+(sD+1)+".html'>"+(sD+1)+"</a>";else sObj.innerHTML = sD+1; //if(cld[sD].isToday) sObj.className = 'todyaColor';
if(cld[sD].isToday)tObj.style.background="#E3F3FB";
sObj.style.color = cld[sD].color; if(cld[sD].lDay==1)
lObj.innerHTML = (cld[sD].isLeap?'闰':'') + cld[sD].lMonth + '月' + (monthDays(cld[sD].lYear,cld[sD].lMonth)==29?'小':'大');
else
lObj.innerHTML = cDay(cld[sD].lDay); s=cld[sD].lunarFestival;
sObj.title=s;
if(s.length>0) {
if(s.length>6) s = s.substr(0, 4)+'..';
s = s.fontcolor('#80CAEE');
}
else { //国历节日
s=cld[sD].solarFestival;
sObj.title=s;
if(s.length>0) {
size = (s.charCodeAt(0)>0 && s.charCodeAt(0)<128)?8:4;
if(s.length>size+2) s = s.substr(0, size)+'…';
s = s.fontcolor('#80CAEE');
}
else { //廿四节气
s=cld[sD].solarTerms;
sObj.title=s;
if(s.length>0) s = s.fontcolor('limegreen');
}
}
if(s.length>0) lObj.innerHTML = s;else sObj.title =lObj.innerHTML; }
else { //非日期
sObj.innerHTML = '';
lObj.innerHTML = '';
}
}
} function changeCld() { drawCld(mYear,mMonth);
} function pushBtm(K) {
switch (K){
case 'YU' :
mYear--;
if(mYear<1900)mYear=1900;
break;
case 'YD' :
mYear++;
if(mYear>2050)mYear=2050;
break;
case 'MU' :
mMonth--;
if(mMonth<0){
mMonth=11;
mYear--;
}
break;
case 'MD' :
mMonth++;
if(mMonth>11){
mMonth=0;
mYear++;
}
break;
default : }
changeCld();
} function changeYear()
{ var areaYear= document.getElementById("areaYear").value
mYear = areaYear;
changeCld();
}
function changeMonth()
{ var areaMonth= document.getElementById("areaMonth").value
mMonth = areaMonth - 1;
changeCld();
} var Today = new Date();
var tY = Today.getFullYear();
var tM = Today.getMonth();
var tD = Today.getDate();
var mYear=tY,mMonth=tM;
////////////////////////////////////////////////////////////////////////////// var width = "130";
var offsetx = 2;
var offsety = 16; var x = 0;
var y = 0;
var snow = 0;
var sw = 0;
var cnt = 0; var dStyle;
//显示详细日期资料
function mOvr(v) {
var s,festival;
var sObj=$('SD'+ v);
var d=sObj.innerHTML-1; //sYear,sMonth,sDay,week,
//lYear,lMonth,lDay,isLeap,
//cYear,cMonth,cDay if(sObj.innerHTML!='') { sObj.style.cursor = 's-resize'; if(cld[d].solarTerms == '' && cld[d].solarFestival == '' && cld[d].lunarFestival == '')
festival = '';
else
festival = '<TABLE WIDTH=100% BORDER=0 CELLPADDING=4 CELLSPACING=0 BGCOLOR="#333333"><TR><TD ALIGN="RIGHT">'+
'<FONT style="color:#FFFFFF; font-size:9pt">'+cld[d].solarTerms + ' ' + cld[d].solarFestival + ' ' + cld[d].lunarFestival+'</FONT></TD>'+
'</TR></TABLE>'; s= '<TABLE WIDTH="140" BORDER=0 CELLPADDING="0" CELLSPACING=0 BGCOLOR="#000099"><TR><TD>' +
'<TABLE WIDTH=100% BORDER=0 CELLPADDING=4 CELLSPACING=0><TR><TD ALIGN="RIGHT" nowrap><FONT style="color:#FFFFFF; font-size:9pt">'+
cld[d].sYear+'年 '+cld[d].sMonth+'月 '+cld[d].sDay+'日<br>星期'+cld[d].week+'<br>'+
'<font color="fuchsia">农历'+(cld[d].isLeap?'闰 ':' ')+cld[d].lMonth+'月 '+cld[d].lDay+'日</font><br>'+
'<font color="yellow">'+cld[d].cYear+'年 '+cld[d].cMonth+'月 '+cld[d].cDay + '日</font>'+
'</FONT></TD></TR></TABLE>'+ festival +'</TD></TR></TABLE>';
if (snow == 0) {
dStyle.left = x+offsetx-(width/2);
dStyle.top = y+offsety;
dStyle.visibility = "visible";
snow = 1;
}
}
} //清除详细日期资料
function mOut() {
if ( cnt >= 1 ) { sw = 0 }
if ( sw == 0 )
{ snow = 0;
dStyle.visibility="hidden";}
else cnt++;
} //取得位置
function mEvn() {
x=event.x;
y=event.y;
if (document.body.scrollLeft)
{x=event.x+document.body.scrollLeft; y=event.y+document.body.scrollTop;}
if (snow){
dStyle.left = x+offsetx-(width/2)
dStyle.top = y+offsety
}
} function inputDateYear(changeYear){
var shtml = "<table cellspacing=\"0\" cellpadding=\"0\" width=\"36\" border=\"1\" bordercolor=\"#BBF0FF\">\n";
shtml+=" <tr align=\"center\" bgcolor=\"#80CAEE\" style=\"color:#003399\">\n";
shtml+= "<td><select name=\"areaYear\" onChange=\"changeYear();\">\n";
shtml+= "<OPTION selected value=\n";
shtml+=mYear+">\n";
shtml+=mYear+"</OPTION>\n";
for(j=1900;j<2050;j++) {
if(j != mYear)shtml+="<OPTION value=\n"+j+">\n"+j+"</OPTION>\n";
}
shtml+="年</td></tr>\n"; shtml+="</table>";
document.getElementById(changeYear).innerHTML=shtml;
drawCld(tY,tM);
} function inputDateMonth(changeMonth){
var shtml = "<table cellspacing=\"0\" cellpadding=\"0\" width=\"36\" border=\"1\" bordercolor=\"#BBF0FF\">\n";
shtml+=" <tr align=\"center\" bgcolor=\"#80CAEE\" style=\"color:#003399\">\n";
shtml+= "<td><select name=\"areaMonth\" onChange=\"changeMonth();\">\n";
shtml+= "<OPTION selected value=\n";
shtml+=mMonth+1+">\n";
shtml+=mMonth+1+"</OPTION>\n";
for(j=1;j<13;j++) {
if(j != (mMonth+1))shtml+="<OPTION value=\n"+j+">\n"+j+"</OPTION>\n";
}
shtml+="月</td></tr>\n"; shtml+="</table>";
document.getElementById(changeMonth).innerHTML=shtml;
drawCld(tY,tM);
} function initial(_date) {
var shtml = "<table cellspacing=\"0\" cellpadding=\"0\" width=\"216\" style=\"border-collapse: collapse\" bgcolor=\"#FFFFFF\" border=\"1\" bordercolor=\"#BBF0FF\" id=\"datetable\">\n";
shtml+=" <tr align=\"center\" bgcolor=\"#80CAEE\" style=\"color:#003399\">\n";
shtml+=" <td width=\"32\" height=\"24\">日</td>\n";
shtml+=" <td width=\"32\">一</td>\n";
shtml+=" <td width=\"32\">二</td>\n";
shtml+=" <td width=\"32\">三</td>\n";
shtml+=" <td width=\"32\">四</td>\n";
shtml+=" <td width=\"32\">五</td>\n";
shtml+=" <td width=\"32\">六</td></tr>\n";
for(i=0;i<6;i++) {
shtml+=" <tr align=\"center\">\n";
for(j=0;j<7;j++) {
gNum = i*7+j shtml+=" <td nowrap=\"nowrap\" id=\"TD" + gNum +"\">\n"; shtml+="<font id=\"SD" + gNum +"\" size=\"2\" face=\"Verdana\"";
if(j == 0||j == 6)shtml+=" color=\"#FF3399\"";else shtml+=" color=\"#333333\""
shtml+=" TITLE=\"\"> d</font><br /><font id=\"LD" + gNum + "\" style=\"font-size:7pt\"> f</font></td>"; }
shtml+=" </tr>\n";
}
shtml+="</table>";
document.getElementById(_date).innerHTML=shtml;
drawCld(tY,tM);
} 里面写了不同的方法来供调用。 在JSP里面的代码：
<TABLE
style="BORDER-RIGHT: #bbf0ff 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #bbf0ff 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #bbf0ff 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #bbf0ff 1px solid; BORDER-COLLAPSE: collapse"
cellSpacing=0 cellPadding=0 width=220 bgColor=#ffffff border=0 align="center">
<TBODY>
<TR bgColor=#e3f3fb height=20>
<TD title=上一年 style="FONT-SIZE: 9pt; CURSOR: hand; COLOR: #000066"
onclick="pushBtm('YU')" align=middle width=14>||</TD>
<TD title=上一月 style="FONT-SIZE: 9pt; CURSOR: hand; COLOR: #000066"
onclick="pushBtm('MU')" align=middle width=14><<</TD>
<TD id=YMBG style="FONT-SIZE: 9pt; CURSOR: hand; COLOR: #000066" noWrap
align=middle onclick="test()"></TD>
<TD style="FONT-SIZE: 9pt;COLOR: #000066" noWrap
align=middle >
<DIV id=selectYear align=center></DIV>
</TD>
<TD style="FONT-SIZE: 9pt;COLOR: #000066" noWrap
align=middle >
<DIV id=selectMonth align=center></DIV>
</TD>
<TD id=GZ style="FONT-SIZE: 9pt; COLOR: #000066" noWrap
align=middle></TD>
<TD title=下一月 style="FONT-SIZE: 9pt; CURSOR: hand; COLOR: #000066"
onclick="pushBtm('MD')" align=middle width=14>>></TD>
<TD title=下一年 style="FONT-SIZE: 9pt; CURSOR: hand; COLOR: #000066"
onclick="pushBtm('YD')" align=middle width=24>||</TD></TR>
<TR>
<TD colSpan=6>
<DIV id=ttdiv align=center width="198"></DIV></TD></TR>
<TR>
<TD colSpan=6 height=1></TD></TR></TBODY></TABLE>
里面调用了JS里面的方法，这只是简单的一个窗体界面，有很多地方还需要进一步优化与完善。
相关阅读 更多 +
