Gather ye rosebuds while ye may

JQuery实现简单日历组件

前端

  1. 需要达到的效果
  2. 大概思路
  3. 首先是html
  4. css
  5. js

demo点这里

需要达到的效果

常见的日历组件
从上到下是左右按键、年月、周标题、日期
点击左右按键可以跳月份
第一个版本就不谢其他东西了
能看到今天几号,某一天是周几这样

大概思路

先获得当前年月,这个月几天
然后算这个月一号周几
放好位置后,后面连着放好即可
主要函数就是一个放日期

首先是html

div.wrapper>title+img.prev+img.next>(ul.week.w$>li.date$*7)*7
七个week,第一个是用来放周一到周日的标志的
后面的六行刚好可以放分割最长的一周

css

需要注意的是,我用了inline-block来放置所有的日期项
有个关于inline-blick的问题就是上下不一定会对齐
那么这里就要把每一个项目都设置一个max-height而非只是height

js

页面加载时生成本月,prev的上一月,next的下一月
都是围绕着一个函数putMonth(year, month)
通过年月改变项目数字
这个函数也有几个注意的点
一是判断闰年:

1
2
3
4
var isleap = false
if ((year % 4 === 0 && year % 100 != 0) || year % 400 == 0) {
isleap = true
}

二是通过闰年判断该月的天数:
1
2
3
4
5
6
7
8
9
10
11
12
var monthNum = 31
if (month === 4 || month === 6 || month === 9 || month === 11) {
monthNum = 30
}

if (month === 2) {
if (isleap) {
monthNum = 29
} else {
monthNum = 28
}
}

三是循环填充的开始点:
1
2
3
4
5
6
7
8
9
do {
do {
putDate(dayNum, row, week01)
dayNum++
week01++
} while (week01 < 8 && dayNum <= monthNum)
row++
week01 = 1
} while (row <= 6 && dayNum <= monthNum)

这里用do-while而非for
还有就是两个需要自己调一调的地方:
getMonth()获得的是从零开始的月份
var month = now.getMonth() + 1
getDay()获得的是从零开始的日期
var week01 = new Date(year + '/' + month + '/' + '0').getDay() + 1
另外两个按键就简单了


以上

页阅读量:  ・  站访问量:  ・  站访客数: