文章目录
简介
很多人习惯按农历过生日,但每年农历对应的公历日期都不一样,手动翻万年历逐年查询非常麻烦。于是写了一个纯前端网页工具,输入公历出生年月日,自动换算出对应的农历生日,批量查询从0岁到N岁,每一岁农历生日对应的公历日期和星期。
无需后端,浏览器直接打开就能使用,已经部署到 GitHub Pages。
一、工具演示效果
输入公历出生日期,设置起始年龄、结束年龄,点击查询。
工具自动换算出出生那天对应的农历,循环计算每一年该农历日期对应的公历,结果以表格展示,包含:年龄、农历生日、当年公历日期、星期。

举个实测例子:
- 公历生日:
2004-07-20→ 换算为农历 六月初四 - 22岁:农历六月初四 → 2026年07月17日 周五
- 23岁:农历六月初四 → 2027年07月07日 周三
本人实测验证:今年22岁,农历生日正是7月17日,工具计算结果完全正确 ✅
遇到闰月出生的特殊场景:如果某一年没有对应的闰月日期,表格会标红提示,不会崩溃报错。
二、技术实现思路
核心依赖
使用 lunisolar 成熟的农历日历JS库,实现公历与农历的互相转换,不用自己手写复杂的农历历法算法,避开大量历法计算的坑。直接CDN引入,不需要打包构建。
整体实现逻辑
- 获取用户输入的公历出生日期,调用lunisolar转换为农历,保存农历月、农历日、是否为闰月出生。
- 根据设置的年龄区间循环遍历,计算每一岁对应的目标农历年份。
- 使用库函数反向,根据【农历年、月、日、是否闰月】换算成公历日期。
- 将所有结果整理成表格渲染到页面,增加斑马纹样式,提升长列表可读性。
- 增加异常捕获,闰月生日遇到不存在该农历日期的年份,在表格里给出提示。
三、部署教程(GitHub Pages)
- 新建公开GitHub仓库;
- 在仓库中新建
index.html文件,放入网页代码并提交; - 进入仓库
Settings→Pages:- Source:
Deploy from a branch - Branch:
main,目录选择/ (root) - 点击Save保存,等待1~3分钟自动部署;
- Source:
- 访问地址格式:
https://你的用户名.github.io/仓库名/
小提示:更新代码提交后,Pages会自动重新构建,浏览器按
Ctrl+F5强制刷新清除缓存。
四、适用场景
- 按农历过生日,想一次性查看未来几十年,每年农历生日落到公历哪一天、星期几;
- 闰月出生的朋友,查看哪些年份没有对应的闰月生日;
- 前端初学者,学习lunisolar农历库、静态网页开发、Github Pages静态网站部署。
五、补充说明
- 纯前端本地计算,所有运算都在浏览器内完成,数据不会上传服务器;
- 基于lunisolar开源历法库,日期计算准确度高;
- 移动端自适应,手机打开也能正常使用。
六、结尾
这个小工具是源于自己日常需求开发,简单实用。感兴趣的朋友可以Fork仓库继续扩展,比如增加一键复制全部结果、导出CSV等功能。
源码放在GitHub,欢迎Star,发现bug可以在仓库提Issue或者评论区留言交流。
CSDN标签(发布粘贴)
#前端 #javascript #农历转换 #github pages #lunisolar #网页小工具
这个版本只保留技术思路,不贴完整代码,适合CSDN分享。工作任务模式可以帮你继续打磨文章的开篇钩子和配图建议,要不要用它继续优化?