1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 包含农历 节气 节假日的前端日历

包含农历 节气 节假日的前端日历

时间:2022-03-19 23:56:12

相关推荐

包含农历 节气 节假日的前端日历

经手了一个项目,要求前端实现一个带有农历、节假日、节气的前端日历,类似万年历的样子。当时查了一些资料,都是一些零零散散的,要么就只有农历,要么只有传统节假日,还有一些对于节气的判断,各种语言的都有,看的头大。正好项目所需,就把很多东西结合起来,封装了一个dateTransForm.js 这么一个方法。实现效果如下:

首先是日历的实现,之前我有写了一篇文章链接地址如下(/u013262823/article/details/90406953),这篇文章详细解释了如何实现一个如上图不包含农历等信息的前端的日历月视图。

节气计算

//计算节气function getJQ(yyyy,mm,dd){var sTermInfo = new Array(0,21208,42467,63836,85337,107014,128867,150921,173149,195551,218072,240693,263343,285989,308563,331033,353350,375494,397447,419210,440795,462224,483532,504758);var solarTerm = new Array("小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至");var tmp1 = new Date((31556925974.7*(yyyy-1900)+sTermInfo[mm*2+1]*60000)+Date.UTC(1900,0,6,2,5));var tmp2 = tmp1.getUTCDate();var solarTerms = "";if (tmp2==dd)solarTerms = solarTerm[mm*2+1];tmp1 = new Date((31556925974.7*(yyyy-1900)+sTermInfo[mm*2]*60000)+Date.UTC(1900,0,6,2,5));tmp2= tmp1.getUTCDate();if (tmp2==dd)solarTerms = solarTerm[mm*2];return solarTerms;}

公历转农历

下面的是搜的一些如何处理公历转农历的一些关键东西,只是粘贴了部分:

let lunarYearArr = [0x0b557, //19490x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, //1950-19590x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, //1960-19690x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, //1970-19790x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, //1980-19890x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0, //1990-19990x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, //2000-0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, //-0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, //-20290x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, //2030-20390x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, //2040-20490x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, //2050-20590x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, //2060-20690x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, //2070-20790x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, //2080-20890x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, //2090-20990x0d520 //2100],lunarMonth = ['正', '二', '三', '四', '五', '六', '七', '八', '九', '十', '冬', '腊'],lunarDay = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '初', '廿'],tianGan = ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸'],diZhi = ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'];

公历转农历的方法有很多,一开始参照着写了一下,功能也是能实现。后来还是查询下npm里面有没有的类似的包已经实现了类似的功能,后来果真发现了一个lunar-calendar这个npm包,已经实现了农历转公历,并且包含了传统节假日,非常简单直接cnpm i lunar-calendar --save 即可。

整合lunar-calendar和getJQ (实现农历、节假日、节气展示)

let LunarCalendar = require( "lunar-calendar")export function sloarToLunar(sy, sm, sd) {let jqStr = getJQ(sy,sm,sd) // 获取节气信息let lsStr = LunarCalendar.solarToLunar(sy,sm+1,sd).lunarFestival ? LunarCalendar.solarToLunar(sy,sm+1,sd).lunarFestival : LunarCalendar.solarToLunar(sy,sm+1,sd).lunarDayName //获取农历以及节假日信息,并做优先级判断return {lunarDay: jqStr ? jqStr : lsStr }}

实现一个农历、节气、节假日的前端日历就这样完成啦。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。