最近看到一个仿百度老黄历的效果,比较好奇如何实现农历算法,看了下源码,发现内部代码看起来极其混乱,于是花了几天时间,将代码梳理了下,去掉了一些不必要的代码,当然也发现了一些比较有意思的东西。先来看看日历的效果:

自定义下拉框

我们可以看到日历的上面有三个下拉框,而且样式都比较好看,这种属于自定义的下拉框,利用ul,li模拟select,option的样式,同时模拟chang事件。html部分如下:

实现类代码如下:

一个类可以初始化一个下拉框实例,这里总共要初始化三个下拉框实例:

农历日期,天干地支,二十四节气

这是整个最难的部分,当然其实我也搞不懂,这个算法应该包含了天文学的知识,甚至包括行星运行轨道等高大尚的东西,计算过程我看的也是一脸懵逼,我大致看了好像有一个叫做"儒略日"的概念,是指公元前4713年1月1日中午12点到现在一共走了多少天,在往下基本就看不懂了。

虽然看不懂内部逻辑,但是我们只要知道返回啥就行了,下面是抽取出来的计算方法,选择一个时间,就可以计算出农历日期,天干地支,二十四节气:

二十四节气是指立春,立夏,立秋等节气,特定的日期才会有,例如demo中指出的2019/08/08就是立秋。

所有节日的划分

window.OB.RiLi.dateAllFestival里面存放了所有的节日,种类包含的比较多,具体看下图:

一般的节日是按照几月几号来定的,例如5月4日青年节,10月1日国庆节;有些是按照农历来划分的,例如八月十五端午节;还有一些外国的节日是按照几月的第几个礼拜几来定的,例如5月的第二个礼拜日为母亲节。

除此之外,除夕的判定方法如下:

也就是正月初一的前一天就是除夕。

星座的计算

星座的计算比较简单,网上有每个星座的日期,只要判断日期即可,下面是精简版的判断星座的方法:

宜,忌

这个主要是请求文件了,估计是计算不出来:

请求时间

日历开始的时候要去请求接口,获取当前服务器时间,因为本地时间可能被篡改,不一定可信。

工作日,休息日

这是整个日历中需要手动配置的部分,涉及到的地方比较多,首先看js部分:

dateRest,dateWork设置的是休息日和工作日,这个每年都不一样的;dateFestival中需要注意设置的日期,这个日期会和后面的一个变量相呼应,如果设置错了就无法出现“休”,"班"字样。

再看html部分:

select下拉框里面的data-desc填写的详细假期信息,mh-date-y中的日期是和前面js中设置的日期相呼应的,必须保持一致。

DEMO下载

点击下载 [0积分]一共下载0

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字