之前一直很想用javascript写一个日历,但是因为完全没有好的思路, 所以迟迟没有尝试。最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日历的实现原理。自己也尝试着做了一下,收获蛮大,掌握了基本的实现原理后,再想增加更多的功能,完全就可以自由发挥了,先在这里分享一下吧,有兴趣的可以试试!
一.表格行数问题
既然要显示日期表格的话,首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共7列。要解决行数问题之前,还得先知道这个月的第1天是星期几,因为每个月的1号并不都是从日历上的星期天开始排的,可能1号是星期五,星期六也说不定,所以1号的左边部分,就得用空表格代替了。那么用多少个空表格代替呢,这里就得用到getDay()方法了,该方法返回数组[0-6]中的一个数字,0代表星期天,1代表星期一,2代表星期二,以此类推。所以如果一个月的1号是星期五的话,那么刚好左边需要5个空表格代替。然后,假如一个月有31天,最后求出的表格行数就是:
var tr_nums = Math.ceil((5 + 31)/7)
当然,并不是每个月都是31天,所以我们得创建一个包含12个月份的数组,每个元素代表每个月份所包含的天数。但是2月份比较特殊,闰年的2月份有29天,平年的2月份只有28天。所以,在创建数组之前,得自己创建一个判断闰年的函数:
//如果当前年份能被4整除但是不能被100整除或者能被400整除,即可确定为闰年,返回1,否则返回0
function isLeap(year) {
return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0
按照你的红框截图部分自己用js写了一个例子.实现你"上一月"和"下一月"等功能.需要的话采纳后hi我.发给你.
其他网友有需要的也可以hi我.大家共同学习.
1.写一个获取当前时间的脚本2.写一个获取事件源绝对坐标的脚本
3.写一个日历生成脚本,根据年(闰年)月(大小月)周(周一到周日)生成日历
4.当事件源(一般是文本框)获得焦点的时候,触发获取绝对坐标的事件,然后生成当前月的日历,将此日历的坐标用脚本移动到文本框下方
5.生成日历的时候,给所有日添加返回事件,把当前选中的年月日反馈
6.用脚本把反馈回来的日期信息,写入事件源控件
7.网上日历控件一大堆,最好别自己写,很容易蛋疼的