【纯前端小工具】公历生日转农历,批量查询每年农历生日对应的公历日期(GitHub Pages在线直接用)

文章目录

简介

很多人习惯按农历过生日,但每年农历对应的公历日期都不一样,手动翻万年历逐年查询非常麻烦。于是写了一个纯前端网页工具,输入公历出生年月日,自动换算出对应的农历生日,批量查询从0岁到N岁,每一岁农历生日对应的公历日期和星期。

无需后端,浏览器直接打开就能使用,已经部署到 GitHub Pages。

GitHub仓库地址:https://github.com/dxiangwiki/birthday_lookup

在线体验地址:https://dxiangwiki.github.io/birthday_lookup/

一、工具演示效果

输入公历出生日期,设置起始年龄、结束年龄,点击查询。

工具自动换算出出生那天对应的农历,循环计算每一年该农历日期对应的公历,结果以表格展示,包含:年龄、农历生日、当年公历日期、星期。

举个实测例子:

  • 公历生日:2004-07-20 → 换算为农历 六月初四
  • 22岁:农历六月初四 → 2026年07月17日 周五
  • 23岁:农历六月初四 → 2027年07月07日 周三

本人实测验证:今年22岁,农历生日正是7月17日,工具计算结果完全正确 ✅

遇到闰月出生的特殊场景:如果某一年没有对应的闰月日期,表格会标红提示,不会崩溃报错。

二、技术实现思路

核心依赖

使用 lunisolar 成熟的农历日历JS库,实现公历与农历的互相转换,不用自己手写复杂的农历历法算法,避开大量历法计算的坑。直接CDN引入,不需要打包构建。

整体实现逻辑

  1. 获取用户输入的公历出生日期,调用lunisolar转换为农历,保存农历月、农历日、是否为闰月出生。
  2. 根据设置的年龄区间循环遍历,计算每一岁对应的目标农历年份。
  3. 使用库函数反向,根据【农历年、月、日、是否闰月】换算成公历日期。
  4. 将所有结果整理成表格渲染到页面,增加斑马纹样式,提升长列表可读性。
  5. 增加异常捕获,闰月生日遇到不存在该农历日期的年份,在表格里给出提示。

三、部署教程(GitHub Pages)

  1. 新建公开GitHub仓库;
  2. 在仓库中新建 index.html 文件,放入网页代码并提交;
  3. 进入仓库 SettingsPages
    • Source:Deploy from a branch
    • Branch:main,目录选择 / (root)
    • 点击Save保存,等待1~3分钟自动部署;
  4. 访问地址格式:https://你的用户名.github.io/仓库名/

小提示:更新代码提交后,Pages会自动重新构建,浏览器按 Ctrl+F5 强制刷新清除缓存。

四、适用场景

  1. 按农历过生日,想一次性查看未来几十年,每年农历生日落到公历哪一天、星期几;
  2. 闰月出生的朋友,查看哪些年份没有对应的闰月生日;
  3. 前端初学者,学习lunisolar农历库、静态网页开发、Github Pages静态网站部署。

五、补充说明

  1. 纯前端本地计算,所有运算都在浏览器内完成,数据不会上传服务器;
  2. 基于lunisolar开源历法库,日期计算准确度高;
  3. 移动端自适应,手机打开也能正常使用。

六、结尾

这个小工具是源于自己日常需求开发,简单实用。感兴趣的朋友可以Fork仓库继续扩展,比如增加一键复制全部结果、导出CSV等功能。

源码放在GitHub,欢迎Star,发现bug可以在仓库提Issue或者评论区留言交流。


CSDN标签(发布粘贴)

#前端 #javascript #农历转换 #github pages #lunisolar #网页小工具

这个版本只保留技术思路,不贴完整代码,适合CSDN分享。工作任务模式可以帮你继续打磨文章的开篇钩子和配图建议,要不要用它继续优化?

相关推荐
SoonITer44 分钟前
怎样构建一个 Agent-friendly 的网站
前端·agent
颜进强1 小时前
01 · NestJS 是什么:用途、解决什么问题、与热门框架对比
前端·后端·ai编程
wendZzoo1 小时前
前端工程师的 3D 第一课:一个模型如何进入网页
前端
颜进强1 小时前
04 · NestJS 依赖注入:你在 `@Module` 写的 providers,和构造参数里那个类型,是怎么"对上"的?
前端·后端·ai编程
肆仲冬1 小时前
不用框架,用 TypeScript 从零搭一个 Agent 框架
前端
林语琛2 小时前
我写的 switch…break 被 Babel 偷偷吞了
前端·javascript·babel
烈风逍遥2 小时前
第六篇:RAG 知识库构建与检索全链路
前端·人工智能·后端
爱丶不疚2 小时前
什么是 Jev 决策模型?它适合干什么?
前端·agent
liuchangng2 小时前
Jev 模型研究:从生成式大模型到决策式模型——System One、RLCD 校准与采用边界
java·javascript·人工智能·python·深度学习