位置: 编程技术 - 正文
推荐整理分享基于javascript编写简单日历(用javascript),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:javascript基础代码,javascript编程基础 案例,javascript编程技术,编写javascript,javascript编程基础 案例,编写javascript的软件有哪些,javascript编程基础 案例,javascript编程技术,内容如对您有帮助,希望把文章链接给更多的朋友!
一.表格行数问题
既然要显示日期表格的话,首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共7列。要解决行数问题之前,还得先知道这个月的第1天是星期几,因为每个月的1号并不都是从日历上的星期天开始排的,可能1号是星期五,星期六也说不定,所以1号的左边部分,就得用空表格代替了。那么用多少个空表格代替呢,这里就得用到getDay()方法了,该方法返回数组[0-6]中的一个数字,0代表星期天,1代表星期一,2代表星期二,以此类推。所以如果一个月的1号是星期五的话,那么刚好左边需要5个空表格代替。然后,假如一个月有天,最后求出的表格行数就是:
var tr_nums = Math.ceil((5 + )/7);
当然,并不是每个月都是天,所以我们得创建一个包含个月份的数组,每个元素代表每个月份所包含的天数。但是2月份比较特殊,闰年的2月份有天,平年的2月份只有天。所以,在创建数组之前,得自己创建一个判断闰年的函数:
然后我们创建一个月份数组:
所以最后就可以获取当月所需表格的行数:
var str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7); //确定日期表格所需的行数
二.打印日历表格
表格本身是一个二维数组,所以让for大师出来跑两个循环就搞定啦,代码如下:
三.附上完整的js日历代码
css部分大家就自由发挥吧,当前时间是年5月2号,效果图如下:
标签: 用javascript
本文链接地址:https://www.jiuchutong.com/biancheng/369928.html 转载请保留说明!友情链接: 武汉网站建设