JavaScript实现万年历【展示前后月补充日期、可上下月份切换】

最近在产品业务开展中,碰到了有使用日历展示数据的需求,当即想起来了js常用案例——万年历的实现,这里做的相对简单,只需获取本月的日历展示出来即可,另加上下月份切换。


首先,我们先来看一下最终要实现的效果,即UI设计图:

(这里只讨论万年历展示的实现,业务数据展示已马赛克,请见谅~~)

在设计图中我们可以看出,首尾的灰色部分为上月和下月的相关日期补充,蓝色部分为本月日期展示。 到这里我们就整理一下思路:

1、本月第一天是周几。

2、今年是平年/闰年的判断(关系到二月份天数)。

3、本月第一天前存在多少空位,需要补充多少上月日期。

4、本月最后一天存在多少空位,需要补充多少下月日期。

5、处理好逻辑关系后,将处理完的日历信息进行渲染展示。

思路整理之后,那么我们只需要将我们的逻辑转换为代码:

<!-- 基础布局html(只展示结构,css样式可自行修改,这里不做赘述) -->
<div class="calendarInfo">
	<h6 class="calendarTitle">
		<div class="setImg">				
			&l
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值