【纯前端小工具】公历生日转农历,批量查询每年农历生日对应的公历日期(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. 进入仓库 Settings → Pages:
    • 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分享。工作任务模式可以帮你继续打磨文章的开篇钩子和配图建议,要不要用它继续优化?

相关推荐
子兮曰9 小时前
把 649 种文件格式塞进一个网页里:一个「文件不出浏览器」的预览器
前端·javascript·后端
paopaokaka_luck12 小时前
基于springboot+vue的智慧家政管理系统(AI问答、 WebSocket实时沟通、ECharts运营分析、订单规则与服务追踪)
java·javascript·spring boot·数据分析·echarts·mybatis
sm_9267870512 小时前
RFID 标签打印的技术实现要点与二次开发实践
java·大数据·前端·c++·编辑器
IMPYLH12 小时前
HTML 的 <video> 元素
前端·html
溪语流沙13 小时前
【每天一个CSS | Day19】流光文字与一笔写成的手写签名
前端·javascript·css
逐光者93313 小时前
STM32——SPI 屏 · Flash · 高速
java·前端·stm32
To_OC13 小时前
同样是让 AI 写全栈,为什么别人一句话就够了
前端·前端框架·next.js
CDwenhuohuo14 小时前
electron pc项目打包成桌面端
前端·javascript·electron
前端大斗师14 小时前
「大于 1000」把 1000 元那单也算进去了:我在 Vue3 订单页对了 10 句话
前端·人工智能·typescript·大模型·原力计划
Jmyd012314 小时前
用 Web VR 引擎搭建 3D 虚拟展厅:从素材上云到多端实时渲染的完整数据链路
前端·3d·vr·三维数字化