如何用JS写一个日历

JavaScript077

如何用JS写一个日历,第1张

首先必须解决的问题是表格的行与列问题。列是固定的,七列,因为一周有七天。行需要动态计算,因为,每一个月的第一天是星期几是一个变数,因而第一天在表格中的第几个单元也就跟着变化,同时,每个月的总天数不一致也影响着各个月对表格行数的需要量。

一.

表格的行数问题

1.首先取得处理月的总天数

JS不提供此参数,我们需要计算。考虑到闰年问题会影响二月份的天数,我们先编写一个判断闰年的自编函数:

function

is_leap(year)

{

return

(year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0))

}

接着定义一个包含十二个月在内的月份总天数的数组:

m_days=new

Array(31,28+is_leap(ynow),31,30,31,31,30,31,30,31,30,31)

m_days这个数组里,二月份的天数已经加入闰年的信息:28+is_leap(ynow)。数组元素从0开始,正好对应于JS提供的Date函数提供的getMonth返回值,即0表示一月,1表示二月,2表示三月,依此类推。

这样,各月总数可以这样取得:m_days[x]。其中,x为0至11的自然数。

2.计算处理月第一天是星期几

可以使用Date函数的getDay取得,返回的值从0到6,0表示星期一,1表示星期二,2表示星期三,其余依此类推。代码如下(假设要处理的时间为2008年3月):

n1str=new

Date(2008,3,1)

firstday=n1str.getDay()

有了月总天数和该月第一天是星期几这两个已知条件,就可以解决表格所需行数问题:(当前月天数+第一天是星期几的数值)除以七。表格函数需要整数,因此,我们使用Math.ceil来处理:

tr_str=Math.ceil((m_days[mnow]

+

firstday)/7)

表格中的tr标签实际上代表表格的行,因此变量tr_str是我们往下写表格的重要依据。

二.

打印日历表格

可以使用两个for语句嵌套起来实现:外层for语句写行,内层for语句写单元格。

for(i=0i<tr_stri++)

{

//外层for语句

-

tr标签

document.write("<tr>")

for(k=0k<7k++)

{

//内层for语句

-

td标签

idx=i*7+k

//表格单元的自然序号

date_str=idx-firstday+1

//计算日期

//这里是处理有效日期代码

}

//内层for语句结束

document.write("</tr>")

}

//外层for语句结束

单元格的自然序号是否代表有效日期非常关键,为此必须加入一个过滤机制:仅打印有效的日期。有效的日期大于0小于小于等于处理月的总天数。

给你个农历的VB源码.

curTime = MaskEdBox1

'星期名

WeekName(0) = " * "

WeekName(1) = "星期日"

WeekName(2) = "星期一"

WeekName(3) = "星期二"

WeekName(4) = "星期三"

WeekName(5) = "星期四"

WeekName(6) = "星期五"

WeekName(7) = "星期六"

'天干名称

TianGan(0) = "甲"

TianGan(1) = "乙"

TianGan(2) = "丙"

TianGan(3) = "丁"

TianGan(4) = "戊"

TianGan(5) = "己"

TianGan(6) = "庚"

TianGan(7) = "辛"

TianGan(8) = "壬"

TianGan(9) = "癸"

'地支名称

DiZhi(0) = "子"

DiZhi(1) = "丑"

DiZhi(2) = "寅"

DiZhi(3) = "卯"

DiZhi(4) = "辰"

DiZhi(5) = "巳"

DiZhi(6) = "午"

DiZhi(7) = "未"

DiZhi(8) = "申"

DiZhi(9) = "酉"

DiZhi(10) = "戌"

DiZhi(11) = "亥"

'属相名称

ShuXiang(0) = "鼠"

ShuXiang(1) = "牛"

ShuXiang(2) = "虎"

ShuXiang(3) = "兔"

ShuXiang(4) = "龙"

ShuXiang(5) = "蛇"

ShuXiang(6) = "马"

ShuXiang(7) = "羊"

ShuXiang(8) = "猴"

ShuXiang(9) = "鸡"

ShuXiang(10) = "狗"

ShuXiang(11) = "猪"

'农历日期名

DayName(0) = "*"

DayName(1) = "初一"

DayName(2) = "初二"

DayName(3) = "初三"

DayName(4) = "初四"

DayName(5) = "初五"

DayName(6) = "初六"

DayName(7) = "初七"

DayName(8) = "初八"

DayName(9) = "初九"

DayName(10) = "初十"

DayName(11) = "十一"

DayName(12) = "十二"

DayName(13) = "十三"

DayName(14) = "十四"

DayName(15) = "十五"

DayName(16) = "十六"

DayName(17) = "十七"

DayName(18) = "十八"

DayName(19) = "十九"

DayName(20) = "二十"

DayName(21) = "廿一"

DayName(22) = "廿二"

DayName(23) = "廿三"

DayName(24) = "廿四"

DayName(25) = "廿五"

DayName(26) = "廿六"

DayName(27) = "廿七"

DayName(28) = "廿八"

DayName(29) = "廿九"

DayName(30) = "三十"

'农历月份名

MonName(0) = "*"

MonName(1) = "正"

MonName(2) = "二"

MonName(3) = "三"

MonName(4) = "四"

MonName(5) = "五"

MonName(6) = "六"

MonName(7) = "七"

MonName(8) = "八"

MonName(9) = "九"

MonName(10) = "十"

MonName(11) = "十一"

MonName(12) = "腊"

'公历每月前面的天数

MonthAdd(0) = 0

MonthAdd(1) = 31

MonthAdd(2) = 59

MonthAdd(3) = 90

MonthAdd(4) = 120

MonthAdd(5) = 151

MonthAdd(6) = 181

MonthAdd(7) = 212

MonthAdd(8) = 243

MonthAdd(9) = 273

MonthAdd(10) = 304

MonthAdd(11) = 334

'农历数据

NongliData(0) = 2635

NongliData(1) = 333387

NongliData(2) = 1701

NongliData(3) = 1748

NongliData(4) = 267701

NongliData(5) = 694

NongliData(6) = 2391

NongliData(7) = 133423

NongliData(8) = 1175

NongliData(9) = 396438

NongliData(10) = 3402

NongliData(11) = 3749

NongliData(12) = 331177

NongliData(13) = 1453

NongliData(14) = 694

NongliData(15) = 201326

NongliData(16) = 2350

NongliData(17) = 465197

NongliData(18) = 3221

NongliData(19) = 3402

NongliData(20) = 400202

NongliData(21) = 2901

NongliData(22) = 1386

NongliData(23) = 267611

NongliData(24) = 605

NongliData(25) = 2349

NongliData(26) = 137515

NongliData(27) = 2709

NongliData(28) = 464533

NongliData(29) = 1738

NongliData(30) = 2901

NongliData(31) = 330421

NongliData(32) = 1242

NongliData(33) = 2651

NongliData(34) = 199255

NongliData(35) = 1323

NongliData(36) = 529706

NongliData(37) = 3733

NongliData(38) = 1706

NongliData(39) = 398762

NongliData(40) = 2741

NongliData(41) = 1206

NongliData(42) = 267438

NongliData(43) = 2647

NongliData(44) = 1318

NongliData(45) = 204070

NongliData(46) = 3477

NongliData(47) = 461653

NongliData(48) = 1386

NongliData(49) = 2413

NongliData(50) = 330077

NongliData(51) = 1197

NongliData(52) = 2637

NongliData(53) = 268877

NongliData(54) = 3365

NongliData(55) = 531109

NongliData(56) = 2900

NongliData(57) = 2922

NongliData(58) = 398042

NongliData(59) = 2395

NongliData(60) = 1179

NongliData(61) = 267415

NongliData(62) = 2635

NongliData(63) = 661067

NongliData(64) = 1701

NongliData(65) = 1748

NongliData(66) = 398772

NongliData(67) = 2742

NongliData(68) = 2391

NongliData(69) = 330031

NongliData(70) = 1175

NongliData(71) = 1611

NongliData(72) = 200010

NongliData(73) = 3749

NongliData(74) = 527717

NongliData(75) = 1452

NongliData(76) = 2742

NongliData(77) = 332397

NongliData(78) = 2350

NongliData(79) = 3222

NongliData(80) = 268949

NongliData(81) = 3402

NongliData(82) = 3493

NongliData(83) = 133973

NongliData(84) = 1386

NongliData(85) = 464219

NongliData(86) = 605

NongliData(87) = 2349

NongliData(88) = 334123

NongliData(89) = 2709

NongliData(90) = 2890

NongliData(91) = 267946

NongliData(92) = 2773

NongliData(93) = 592565

NongliData(94) = 1210

NongliData(95) = 2651

NongliData(96) = 395863

NongliData(97) = 1323

NongliData(98) = 2707

NongliData(99) = 265877

'生成当前公历年、月、日 ==>GongliStr

curYear = Year(curTime)

curMonth = Month(curTime)

curDay = Day(curTime)

GongliStr = curYear &"年"

If curMonth <10 Then

GongliStr = GongliStr &"0" &curMonth &"月"

Else

GongliStr = GongliStr &curMonth &"月"

End If

If curDay <10 Then

GongliStr = GongliStr &"0" &curDay &"日"

Else

GongliStr = GongliStr &curDay &"日"

End If

'生成当前公历星期 ==>WeekdayStr

curWeekday = Weekday(curTime)

WeekdayStr = WeekName(curWeekday)

'计算到初始时间1921年2月8日的天数:1921-2-8(正月初一)

TheDate = (curYear - 1921) * 365 + Int((curYear - 1921) / 4) + curDay + MonthAdd(curMonth - 1) - 38

If curYear Mod 4 = 0 And curMonth >2 Then

TheDate = TheDate + 1

End If

'计算农历天干、地支、月、日

isEnd = 0

m = 0

Do

If NongliData(m) <4095 Then

k = 11

Else

k = 12

End If

n = k

Do

If n <0 Then

Exit Do

End If

'获取NongliData(m)的第n个二进制位的值

bit = NongliData(m)

For i = 1 To n Step 1

bit = Int(bit / 2)

Next

bit = bit Mod 2

If TheDate <= 29 + bit Then

isEnd = 1

Exit Do

End If

TheDate = TheDate - 29 - bit

n = n - 1

Loop

If isEnd = 1 Then

Exit Do

End If

m = m + 1

Loop

curYear = 1921 + m

curMonth = k - n + 1

curDay = TheDate

If k = 12 Then

If curMonth = (Int(NongliData(m) / 65536) + 1) Then

curMonth = 1 - curMonth

ElseIf curMonth >Int(NongliData(m) / 65536) + 1 Then

curMonth = curMonth - 1

End If

End If

'生成农历天干、地支、属相 ==>NongliStr

NongliStr = "农历" &TianGan(((curYear - 4) Mod 60) Mod 10) &DiZhi(((curYear - 4) Mod 60) Mod 12) &"年"

NongliStr = NongliStr &"(" &ShuXiang(((curYear - 4) Mod 60) Mod 12) &")"

'生成农历月、日 ==>NongliDayStr

If curMonth <1 Then

NongliDayStr = "闰" &MonName(-1 * curMonth)

Else

NongliDayStr = MonName(curMonth)

End If

NongliDayStr = NongliDayStr &"月"

NongliDayStr = NongliDayStr &DayName(curDay)

Label2 = NongliStr &NongliDayStr