摘要:练习一个日历例子输出一个日历显示当前日期为红色主要的理解和掌握点是使用函数根据天数计算日历的长度主要是行因为列是固定的一周只有天根据天数计算各天放置的单元格位置每月第一天的特殊处理很多时候是从索引开始计算例如代表个月之类一个包括个月的天数
练习一个日历例子,输出一个日历,显示当前日期为红色
主要的理解和掌握点是:
使用Date()函数
根据天数计算日历的长度,主要是行,因为列是固定的,一周只有7天
根据天数计算各天放置的单元格位置
每月第一天的特殊处理
很多时候是从索引0开始计算,例如0-11代表12个月之类
一个包括12个月的天数的数组
效果图:
日 一 二 三 四 五 六 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
代码:
function is_leap(year) { return (year % 100 == 0 ? res = (year % 400 == 0 ? 1 : 0) : res = (year % 4 == 0 ? 1 : 0)); } //是否为闰年 var nstr = new Date(); //当前Date资讯 var ynow = nstr.getFullYear(); //年份 var mnow = nstr.getMonth(); //月份 var dnow = nstr.getDate(); //今日日期 var n1str = new Date(ynow, mnow, 1); //传入获取到的年月,并且日设置为1,获取当月的第一天的日期信息 var firstday = n1str.getDay(); //当月第一天星期几 var m_days = new Array(31, 28 + is_leap(ynow), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); //各月份的总天数 //月份天数+第一天星期几 除以7,获取整数行数,然后取整,得到表格所需要行数,即这个月的天数需要排多少行 var tr_str = Math.ceil((m_days[mnow] + firstday) / 7); //打印表格第一行(有星期标志)(表头) document.write("
日 | 一 | 二 | 三 | 四 | 五 | 六 |
" + date_str + " | ") : document.write("" + date_str + " | "); } document.write("
这里有几个重点:
Math.ceil((m_days[mnow] + firstday) / 7)
A: 将当月的日数和1号左边的空白格相加是因为第一天可能会排在其他空格里面,所以要把第一天左边的空格的数量也加上,
这样才符合日历的设计,除以7是因为一个星期只有7天,然后进行取整,例如将4.5行取整为5行
idx = i * 7 + k;
A: 这是作为日历的每一个格的编号用的,因为如果不这样使用的话,没办法将第一行输出0-6,
然后第二行输出7-13,然后第三行14-20......所以这里需要用 i*7 +k 来实现这个格式
date_str = idx - firstday + 1;
A: firstday是获取当月的第一天的周几,用日历的每一个格的编号来减去 firstday 的话,可以确定每一个格的日期,
日 一 二 三 四 五 六 -4 -3 -2 -1 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
但是考虑到没有0的开始日期,所以需要额外加一
所以,(date_str <= 0 || date_str > m_days[mnow]) 这个判断就是为了过滤负数和超过31的日期
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/81310.html
摘要:主要是为了阻止微信浏览器的默认滑动。四如何利用五个做到无限滑动其实我在写第一个版本的日历的时候,采取的解决办法是当新的月份产生之后,往中不断。如何控制的值实现滑动效果,这个问题不是这次的重点。 之前写了一篇Calendar -『为移动端而生』的自定义日历,一直有童鞋对这个插件的手势处理存在一些问题,所以想写篇文章,来说说它的成长史~ 在阅读本文之前,确保你有稍微看过 calendar ...
摘要:主要是为了阻止微信浏览器的默认滑动。四如何利用五个做到无限滑动其实我在写第一个版本的日历的时候,采取的解决办法是当新的月份产生之后,往中不断。如何控制的值实现滑动效果,这个问题不是这次的重点。 之前写了一篇Calendar -『为移动端而生』的自定义日历,一直有童鞋对这个插件的手势处理存在一些问题,所以想写篇文章,来说说它的成长史~ 在阅读本文之前,确保你有稍微看过 calendar ...
摘要:主要是为了阻止微信浏览器的默认滑动。四如何利用五个做到无限滑动其实我在写第一个版本的日历的时候,采取的解决办法是当新的月份产生之后,往中不断。如何控制的值实现滑动效果,这个问题不是这次的重点。 之前写了一篇Calendar -『为移动端而生』的自定义日历,一直有童鞋对这个插件的手势处理存在一些问题,所以想写篇文章,来说说它的成长史~ 在阅读本文之前,确保你有稍微看过 calendar ...
摘要:正则表达式的概念和作用正则表达式的概念和作用正则表达式的概述正则表达式也是一个字符串,用来定义匹配规则,在类中有简单的规则定义。可以结合字符串类的方法使用。简单记正则表达式是具有特殊含义的字符串。 01正则表达式的概念和作用 * A: 正则表达式的概念和作用 * a: 正则表达式的概述 * 正则表达式也是一个字符串,用来定义匹配规则,在Pattern类中有简单的...
摘要:类是日期时间格式化子类的抽象类,我们通过这个类可以帮我们完成日期和文本之间的转换也就是可以在对象与对象之间进行来回转换。构造方法由于为抽象类,不能直接使用,所以需要常用的子类。 day01【Object类、常用API】 主要内容 Object类 Date类 DateFormat类 Calendar类 System类 StringBuilder类 包装类 教学目标 -[ ] 能够说出...
阅读 1272·2021-11-16 11:44
阅读 3736·2021-10-09 10:01
阅读 1697·2021-09-24 10:31
阅读 3730·2021-09-04 16:41
阅读 2478·2021-08-09 13:45
阅读 1185·2019-08-30 14:08
阅读 1755·2019-08-29 18:32
阅读 1623·2019-08-26 12:12