如何用JavaScript编写一个万年历

JavaScript020

如何用JavaScript编写一个万年历,第1张

<html>

<head>

<base fptype="TRUE">

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>本地时间</title>

<script>setInterval("jnkc.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay())",1000)</script>

<marquee scrollamount=8><div id='jnkc'></div>

</marquee>

</head>

<body>

<script language=javascript>

function settab()

{

var tab=document.getElementById('tab1')

//alert(se1.options[se1.selectedIndex].text)

var se11=se1.options[se1.selectedIndex].text

var se21=se2.options[se2.selectedIndex].text//下拉列表中的日期

//alert(se11+","+se21)

var lastday=new Date(se11,se21,0).getDate()//所选择月的天数

var firstday=new Date(se11,se21-1,1).getDay()//选择月的第一天是星期几

//alert(lastday+","+firstday)

var weekend//每周的最后一天的日期

var lines//第几行,相对于表格,星期为第零行

//第一行日期

for(var lin1=0lin1<7lin1++)

{

if(lin1<firstday)

tab.rows[1].cells[lin1].innerHTML=" "

else

if(lin1==0||lin1==6)

tab.rows[1].cells[lin1].innerHTML="<font color=red>"+(lin1-firstday+1)+"</font>"

else

tab.rows[1].cells[lin1].innerHTML=lin1-firstday+1

//alert(lin1+","+firstday)

weekend=lin1-firstday+1

lines=1//第一行

}

//将最后2行值空之后再添加数据,以免遗留上一个月的数据,二行相对于非闰年的二月份

for(var i=0i<7i++)

{

tab.rows[5].cells[i].innerHTML=" "

tab.rows[6].cells[i].innerHTML=" "

}

while(weekend<lastday)//循环到月末

{

for(var lin2=0lin2<7lin2++)

{

if(weekend+lin2<lastday)//数字小于等于当前月的最后一天

{

if(lin2==0||lin2==6)

tab.rows[lines+1].cells[lin2].innerHTML="<font color=red>"+(weekend+1+lin2)+"</font>"

else

tab.rows[lines+1].cells[lin2].innerHTML=weekend+1+lin2

}

同样的函数,这个却不能用第402行,按下某日期显示当前节气

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE></TITLE>

<META http-equiv=Content-Type content=text/htmlcharset=gb2312>

<META

<META content=All name=robots>

<META content="Gregorian Solar Calendar and Chinese Lunar Calendar"

name=description>

<META content=no-cache name=Pragma>

<META content=no-cache name=Cache-Control>

<script language="JavaScript" src="jieri.js"></script>

<script language="JavaScript" src="jieqi.js"></script>

<SCRIPT language=JScript>

var conWeekend = 3

var lunarInfo=new Array(

0x4bd8,0x4ae0,0xa570,0x54d5,0xd260,0xd950,0x5554,0x56af,0x9ad0,0x55d2,

0x4ae0,0xa5b6,0xa4d0,0xd250,0xd295,0xb54f,0xd6a0,0xada2,0x95b0,0x4977,

0x497f,0xa4b0,0xb4b5,0x6a50,0x6d40,0xab54,0x2b6f,0x9570,0x52f2,0x4970,

0x6566,0xd4a0,0xea50,0x6a95,0x5adf,0x2b60,0x86e3,0x92ef,0xc8d7,0xc95f,

0xd4a0,0xd8a6,0xb55f,0x56a0,0xa5b4,0x25df,0x92d0,0xd2b2,0xa950,0xb557,

0x6ca0,0xb550,0x5355,0x4daf,0xa5b0,0x4573,0x52bf,0xa9a8,0xe950,0x6aa0,

0xaea6,0xab50,0x4b60,0xaae4,0xa570,0x5260,0xf263,0xd950,0x5b57,0x56a0,

0x96d0,0x4dd5,0x4ad0,0xa4d0,0xd4d4,0xd250,0xd558,0xb540,0xb6a0,0x95a6,

0x95bf,0x49b0,0xa974,0xa4b0,0xb27a,0x6a50,0x6d40,0xaf46,0xab60,0x9570,

0x4af5,0x4970,0x64b0,0x74a3,0xea50,0x6b58,0x5ac0,0xab60,0x96d5,0x92e0,

0xc960,0xd954,0xd4a0,0xda50,0x7552,0x56a0,0xabb7,0x25d0,0x92d0,0xcab5,

0xa950,0xb4a0,0xbaa4,0xad50,0x55d9,0x4ba0,0xa5b0,0x5176,0x52bf,0xa930,

0x7954,0x6aa0,0xad50,0x5b52,0x4b60,0xa6e6,0xa4e0,0xd260,0xea65,0xd530,

0x5aa0,0x76a3,0x96d0,0x4afb,0x4ad0,0xa4d0,0xd0b6,0xd25f,0xd520,0xdd45,

0xb5a0,0x56d0,0x55b2,0x49b0,0xa577,0xa4b0,0xaa50,0xb255,0x6d2f,0xada0,

0x4b63,0x937f,0x49f8,0x4970,0x64b0,0x68a6,0xea5f,0x6b20,0xa6c4,0xaaef,

0x92e0,0xd2e3,0xc960,0xd557,0xd4a0,0xda50,0x5d55,0x56a0,0xa6d0,0x55d4,

0x52d0,0xa9b8,0xa950,0xb4a0,0xb6a6,0xad50,0x55a0,0xaba4,0xa5b0,0x52b0,

0xb273,0x6930,0x7337,0x6aa0,0xad50,0x4b55,0x4b6f,0xa570,0x54e4,0xd260,

0xe968,0xd520,0xdaa0,0x6aa6,0x56df,0x4ae0,0xa9d4,0xa4d0,0xd150,0xf252,

0xd520)

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("1 月","2 月","3 月","4 月","5 月","6 月","7 月","8 月","9 月","10 月","11 月","12 月")

var timeData = {

"Asia亚洲": { //----------------------------------------------

"Brunei 文莱 ":["+0800","","斯里巴加湾市"],

"Burma 缅甸 ":["+0630","","仰光"],

"Cambodia 柬埔寨 ":["+0700","","金边"],

"China 中国 ":["+0800","","北京、重庆、上海、天津"],

"China(HK,Macau) 中国 ":["+0800","","香港、澳门特区"],

"China(TaiWan) 中国 ":["+0800","","台北、高雄"],

"China(Urumchi) 中国 ":["+0700","","乌鲁木齐"],

"Indonesia 印尼 ":["+0700","","雅加达"],

"Poland 波兰 ":["+0100","","华沙"],

"国际换日线 ":["-1200","","国际换日线"]

}

}

function lYearDays(y) {

var i, sum = 348

for(i=0x8000i>0x8i>>=1) sum += (lunarInfo[y-1900] &i)? 1: 0

return(sum+leapDays(y))

}

function leapDays(y) {

if(leapMonth(y)) return( (lunarInfo[y-1899]&0xf)==0xf? 30: 29)

else return(0)

}

function leapMonth(y) {

var lm = lunarInfo[y-1900] &0xf

return(lm==0xf?0:lm)

}

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=1900i<2050 &&offset>0i++) {

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=1i<13 &&offset>0i++) {

//闰月

if(leap>0 &&i==(leap+1) &&this.isLeap==false)

{ --ithis.isLeap = truetemp = 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 //公元年4位数字

this.sMonth = sMonth//公元月数字

this.sDay= sDay //公元日数字

this.week= week //星期, 1个中文

//农历

this.lYear = lYear //公元年4位数字

this.lMonth = lMonth//农历月数字

this.lDay= lDay //农历日数字

this.isLeap = isLeap//是否为农历闰月?

//八字

this.cYear = cYear //年柱, 2个中文

this.cMonth = cMonth//月柱, 2个中文

this.cDay= cDay //日柱, 2个中文

this.color = ''

this.lunarFestival = ''//农历节日

this.solarFestival = ''//公历节日

this.solarTerms = ''//节气

}

//===== 某年的第n个节气为几日(从0小寒起算)

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 strDate(objDate)

{

var tY = objDate.getFullYear()

var tM = objDate.getMonth()+1

var tD = objDate.getDate()

var tH = objDate.getHours()

var s

s=+tY+"年"+tM+"月"+tD+"日"+tH+"时"

return s

}

function GetTerm(objDate) {

var year=objDate.getFullYear()

var d

var i

for (i=1i<23i+=2) {

d=sTerm(year,i)

if (objDate<d) break

}

if (i==1) i=23

return i

}

function calendar(y,m) {

var sDObj, lDObj, lY, lM, lD=1, lL, lX=0, tmp1, tmp2, tmp3, BMjqFtvl

var cY, cM, cD//年柱,月柱,日柱

var lDPOS = new Array(3)

var n = 0

var firstLM = 0

sDObj = new Date(y,m,1,0,0,0,0) //当月一日日期

this.length = solarDays(y,m) //公历当月天数

this.firstWeek = sDObj.getDay() //公历当月1日星期几

if(m<2) cY=cyclical(y-1900+36-1)

else cY=cyclical(y-1900+36)

var term2=sTerm(y,2)//立春日期

var firstNode = sTerm(y,m*2) //返回当月「节」为几日开始

cM = cyclical((y-1900)*12+m+12)

var dayCyclical = Date.UTC(y,m,1,0,0,0,0)/86400000+25567+10

for(var i=0i<this.lengthi++) {

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

}

if(m==1 &&(i+1)==term2) cY=cyclical(y-1900+36)

if((i+1)==firstNode) cM = cyclical((y-1900)*12+m+13)

cD = cyclical(dayCyclical+i)

this[i] = new calElement(y, m+1, i+1, nStr1[(i+this.firstWeek)%7],

lY, lM, lD++, lL,

cY ,cM, cD )

}

sFtv = new Array(

"0101*新年元旦",

"0312 植树节 孙中山逝世纪念日",

"0314 国际警察日")

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'

}

}

function cMonth(d){

var s

switch (d) {

case 1:s = '正'break

case 11: s = '冬'break

case 12: s = '腊'break

break

default :

s = nStr1[d%12]

}

return(s)

}

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(years,months) {

var i,sD,s,size

cld = new calendar(years,months)

if(years>1874 &&years<1909) yDisplay = '光绪' + (((years-1874)==1)?'元':years-1874)

if(years>1908 &&years<1912) yDisplay = '宣统' + (((years-1908)==1)?'元':years-1908)

if(years>1911 &&years<1950) yDisplay = '民国' + (((years-1911)==1)?'元':years-1911)

if(years>1948) yDisplay = '建国<font color=red>' + (((years-1949)==1)?'元':years-1949)

GZ.innerHTML = yDisplay+'</font>年'+'</a> '+Animals[(years-4)%12]+'年[农历<font color=red>' + cyclical(years-1900+36)+'</font>年]'

for(i=0i<42i++) {

sObj=eval('SD'+ i)

lObj=eval('LD'+ i)

sObj.className = ''

sD = i - cld.firstWeek

if(sD>-1 &&sD<cld.length) { //日期内

sObj.innerHTML = sD+1

if(cld[sD].isToday) sObj.className = 'todyaColor'//今日颜色

if(cld[sD].lDay==1) //显示农历月

lObj.innerHTML = '<b>'+(cld[sD].isLeap?'闰':'') + cld[sD].lMonth + '月' + (monthDays(cld[sD].lYear,cld[sD].lMonth)==29?'小':'大')+'</b>'

else //显示农历日

lObj.innerHTML = cDay(cld[sD].lDay)

s=cld[sD].solarFestival

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=='黑色星期五')?s.fontcolor('black'):s.fontcolor('blue')

}

else {

s=cld[sD].lunarFestival

if(s.length>0) { //农历节日

if(s.length>6) s = s.substr(0, 4)+'...'

s = s.fontcolor('red')

}

else { //廿四节气

s=cld[sD].solarTerms

if(s.length>0) s = s.fontcolor('limegreen')

}

}

if(s.length>0) lObj.innerHTML = s

}

else { //非日期

sObj.innerHTML = ''

lObj.innerHTML = ''

}

}

}

function changeCld() {

var y,m

y=CLD.years.selectedIndex+1900

m=CLD.months.selectedIndex

drawCld(y,m)

}

var Today = new Date()

var tY = Today.getFullYear()

var tM = Today.getMonth()

var tD = Today.getDate()

var width = "130"

var offsetx = 2

var offsety = 8

var x = 0

var y = 0

var snow = 0

var sw = 0

var cnt = 0

var dStyle

document.onmousemove = mEvn

function mOvr(v) {

var s,festival,sjqFtvl

var sObj=eval('SD'+ v)

var d=sObj.innerHTML-1

if(sObj.innerHTML!='') {

sObj.style.cursor= 'help'

if(cld[d].solarTerms == '' &&cld[d].solarFestival == '' &&cld[d].lunarFestival == '')

festival = ''

else

festival = '<TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR="#CCFFCC"><TR><TD ALIGN="center">'+

'<FONT COLOR="#000000" STYLE="font-size:9pt">'+cld[d].solarTerms + ' ' +'</FONT></TD>'+

'</TR></TABLE>'

s= '<table border="2" width="140" bordercolor="#0066CC" bgcolor="#FFFBE8" cellpadding="0" cellspacing="0"><TR><td>' +

'<TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD ALIGN="center"><FONT COLOR="#ff00ff" STYLE="font-size:9pt">'+

cld[d].sYear+'年'+cld[d].sMonth+'月'+cld[d].sDay+'日 星期'+cld[d].week+'<br>'+

'<font color="#FF8000">农历'+cld[d].cYear+'年'+(cld[d].isLeap?' 闰':' ')+cMonth(cld[d].lMonth)+'月'+cDay(cld[d].lDay)+'</font><br>'+

'<font color="009900">'+cld[d].cYear+'年 '+cld[d].cMonth+'月 '+cld[d].cDay + '日</font>'+

'</FONT></TD></TR></TABLE>'+ festival +'</TD></TR></TABLE>'

document.all["detail"].innerHTML = s

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 = 0dStyle.visibility = "hidden"}

else cnt++

}

function mEvn() {

x=event.x

y=event.y

if (document.body.scrollLeft)

{x=event.x+document.body.scrollLefty=event.y+document.body.scrollTop}

if (snow){

dStyle.left = x+offsetx-(width/2)

dStyle.top = y+offsety

}

}

function jieqi(objDate) {

var year=objDate.getFullYear()

var dvar ivar m

for (i=0i<24i+=1) {

d=sTerm(year,i)

m=i

if (objDate<=d) break

} return m

}

function mDown(V) {

var sObj=eval('SD'+ V)

var D=sObj.innerHTML-1

var ya=cld[D].sYear//获得当前公历日期!

var ma=cld[D].sMonth

var da=cld[D].sDay

var Today=new Date(ya,ma,da,0,0,0)

m=jieqi(Today)

document.all.s3.value=m

}

function setCookie(name,value) {

var today = new Date()

var expires = new Date()

expires.setTime(today.getTime() + 1000*60*60*24*365)

document.cookie = name + "=" + escape(value) + "expires=" + expires.toGMTString()

}

function getCookie(Name) {

var search = Name + "="

if(document.cookie.length >0) {

offset = document.cookie.indexOf(search)

if(offset != -1) {

offset += search.length

end = document.cookie.indexOf("", offset)

if(end == -1) end = document.cookie.length

return unescape(document.cookie.substring(offset, end))

}

else return('')

}

else return('')

}

function initialize() {

dStyle = detail.style

CLD.years.selectedIndex=tY-1900

CLD.months.selectedIndex=tM

drawCld(tY,tM)

}

</SCRIPT>

<STYLE>

.todyaColor {BACKGROUND-COLOR: aqua}

</STYLE><META content="MSHTML 6.00.2900.2802" name=GENERATOR></HEAD>

<BODY onload=initialize()>

<DIV id=detail

style="Z-INDEX: 3FILTER: shadow(color=#333333,direction=135)WIDTH: 140pxPOSITION: absoluteHEIGHT: 120px"></DIV>

<CENTER>

<TABLE border=0>

<TBODY>

<TR>

<FORM name=xz>

<TD width=440 align=center vAlign=top bgcolor="#CCCCCC">

<label>122

<textarea width=440 name="textarea"></textarea>

</label>

</FORM>

<FORM name=CLD>

<TD align=middle>

<TABLE width="300" border="0" cellSpacing=1 cellPadding=0>

<TR> <TBODY> <TR bgcolor="#319AFF">

<TD colSpan=7 align="center"><FONT style="FONT-SIZE: 9pt"

color=#9900CC size=3> 公元

<SELECT onchange=changeCld() name=years> <SCRIPT language=JavaScript> for(i=1900i<2101i++) document.write('<option>'+i)</SCRIPT> </SELECT>年

<SELECT onchange=changeCld() name=months> <SCRIPT language=JavaScript> for(i=1i<13i++) document.write('<option>'+i)</SCRIPT> </SELECT>月

第 <input name="s3" type="text" size="2" >个节气

<SELECT name=hours><SCRIPT language=JavaScript> for(i=1i<13i++) document.write('<option>'+i)</SCRIPT> </SELECT>时 </FONT> <TR align=middle bgColor=#FF9900>

<TD width=54><FONT color=red>日</FONT><FONT color="#e7f7fe">SUN</FONT></TD>

<TD width=54>一<FONT color="#e7f7fe">MON</FONT></TD>

<TD width=54>二<FONT color="#e7f7fe">TUE</FONT></TD>

<TD width=54>三<FONT color="#e7f7fe">WED</FONT></TD>

<TD width=54>四<FONT color="#e7f7fe">THR</FONT></TD>

<TD width=54>五<FONT color="#e7f7fe">FRI</FONT></TD>

<TD width=54><FONT color=green>六</FONT><FONT color="#e7f7fe">SAT</FONT></TD></TR>

<SCRIPT language=JavaScript><!--

var gNum

for(i=0i<6i++) {

document.write('<tr align=center>')

for(j=0j<7j++) {

gNum = i*7+j

document.write('<td id="GD' + gNum +'" onMouseOver="mOvr(' + gNum +')" onMouseOut="mOut()" onMouseDown="mDown(' + gNum +')"')

document.write('><font id="SD' + gNum +'" size=5 face="Arial Black"')

if(j == 0) document.write(' color=red')

if(j == 6)

if(i%2==1) document.write(' color=red')

else document.write(' color=green')

document.write(' TITLE=""></font><br><font id="LD' + gNum + '" size=2 style="font-size:9pt"></font></td>')

}

document.write('</tr>')

}

//--></SCRIPT>

</TBODY></TABLE></TD>

<TD width=60 align=middle vAlign=top bgcolor="#CCCCCC"><BR><BR><P><TR> <TD align=right bgColor=#00aa55 colSpan=8><FONT color=#fffff face=宋体 id=GZ></FONT></TD></TR></TBODY></TABLE></TD></FORM></CENTER></TR></TBODY></TABLE></CENTER></BODY></HTML>