如何用JS写一个日历

JavaScript013

如何用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小于小于等于处理月的总天数。

简易日历制作方法:

1、准备A4大小的白纸或彩色卡纸。卡纸比普通白纸厚,用卡纸制成的日历比较耐用。

2、用尺子画出7纵行、5横行的表格。分别在12张卡纸上画表,每张纸代表一个月份。确保每个单元格宽窄高低一致,不要有任何一条线弯曲。先用铅笔画,等你把每个单元格大小都调整完毕,线也都画直的时候,就可以用永久性记号笔再描一遍了。

3、写下月份。在每张卡纸的顶部写上月份——一月、二月、三月、四月、五月、六月、七月、八月、九月、十月、十一月及十二月。月份要写得大一点,用水彩笔、彩色铅笔或彩色记号笔来写。确保月份都要写对。

4、标注星期几。在表格的第一行分别写上星期一至星期五。

5、填写日期。日期要写在每个单元格的右上角。先找出上一年的日历,看看第一天是从星期几开始的。比方说,如果去年12月的最后一天是星期三,那么今年一月的第一天就是星期四。

确保每个月的天数准确无误,因为一年十二个月有大小月之分。为了方便你记忆每个月的天数,你可以记一下这条口诀:四、六、九、十一月有31天,除二月外其余30天,平年二月28天,闰年二月29天。

6、装饰日历。每一页日历都可以按照你自己的心意来装饰。水彩笔、彩色铅笔、记号笔、蜡笔齐上阵;贴纸、亮片、闪光胶也不赖;最重要的是,要发挥你的想象力!

7、标出重要的日子。在日历上标出所有重要的日子,如生日、圣诞节、开学日等等。有个比较有创意的办法就是找一张与这一天相关的图片,然后贴在相应的日期上。

比如说,你姐姐的生日在5月6号,你就剪一张她的大头照贴在5月6号那一天上。你还可以在12月25号那一天上贴上一张圣诞树的图片;万圣节就可以贴巫婆或幽灵;复活节就可以贴毛茸茸的小兔子。

8、把日历挂起来。在每张卡纸的顶部剪两个洞,注意洞的边缘必须光滑。找一根长长的细绳、麻线或者棉线,将两端分别穿进洞里,这样就可以挂起来了。把日历挂在挂钩或钉子上,不论你想挂在卧室里、厨房里还是教室里都可以。不要忘了,每过一天,就可以在日期上画个叉哦。

<script src="js/Calendar.js" type="text/javascript" language="javascript"></script>

加入到你的页面中 js/Calendar.js 这是控件的路径

<input name="txtDate" type="text" onclick="SelectDate(this)" readonly="readonly">

Calendar.js 这个东西应该可以找的到吧,onclick="SelectDate(this)" 这是调用的方法