运行效果:

源代码:

  1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>带农历的日历</title>
6
7 <body onload=initial()>
8 <center>
9 <form name=CLD>
10 <table>
11 <tr>
12 <td align=middle>
13 <table border=1 cellpadding="0" cellspacing="0" bordercolordark="#FFFFFF" bordercolor="#ffffff"
14 bordercolorlight="#EEEEEE">
15 <tr bgcolor="#006600">
16 <td colspan=7>
17 <font color=#ffffff style="FONT-SIZE: 9pt">公历
18 <select name=SY onchange=changeCld() style="FONT-SIZE: 9pt">
19 <script language="JavaScript">
20 for (i = 1900; i < 2050; i++) document.write('<option>' + i);
21 </script>
22 </select> 年 <select name=SM onchange=changeCld() style="FONT-SIZE: 9pt">
23 <script language="JavaScript">
24 for (i = 1; i < 13; i++) document.write('<option>' + i);
25 </script>
26 </select> 月 </font>
27 <font color=#ffffff face=宋体 id=GZ style="FONT-SIZE: 12pt"></font><BR>
28 </td>
29 </tr>
30 <tr align=middle bgColor=#e0e0e0>
31 <td width=54 style="font-size:9pt; padding:5pt;">日</td>
32 <td width=54 style="font-size:9pt ">一</td>
33 <td width=54 style="font-size:9pt ">二</td>
34 <td width=54 style="font-size:9pt ">三</td>
35 <td width=54 style="font-size:9pt ">四</td>
36 <td width=54 style="font-size:9pt ">五</td>
37 <td width=54 style="font-size:9pt ">六</td>
38 </tr>
39 <script type="text/javascript">
40 var gNum;
41 for (i = 0; i < 6; i++) {
42 document.write('<tr align=center>');
43 for (j = 0; j < 7; j++) {
44 gNum = i * 7 + j;
45 document.write('<td id="GD' + gNum + '"><font id="SD' + gNum + '" size=2 face="Arial Black"');
46 if (j == 0) {
47 document.write('color=red');
48 }
49 if (j == 6) {
50 document.write('color=#000080');
51 }
52 document.write(' title=""></font><br><font id="LD' + gNum + '" size=2 style="font-size:9pt"> </font></td>');
53 }
54 document.write('</tr>');
55 }
56 </script>
57 </table>
58 </td>
59 </tr>
60 </table>
61 </form>
62 </center>
63
64 <script type="text/javascript">
65 var lunarInfo = new Array(
66 0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2,
67 0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977,
68 0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970,
69 0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950,
70 0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557,
71 0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5d0, 0x14573, 0x052d0, 0x0a9a8, 0x0e950, 0x06aa0,
72 0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0,
73 0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b5a0, 0x195a6,
74 0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570,
75 0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0,
76 0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5,
77 0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930,
78 0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530,
79 0x05aa0, 0x076a3, 0x096d0, 0x04bd7, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45,
80 0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0)
81
82 var solarMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
83 var Animals = new Array("鼠", "牛", "虎", "兔", "龙", "蛇", "马", "羊", "猴", "鸡", "狗", "猪");
84 var solarTerm = new Array("小寒", "大寒", "立春", "雨水", "惊蛰", "春分", "清明", "谷雨", "立夏", "小满", "芒种", "夏至", "小暑", "大暑", "立秋", "处暑", "白露", "秋分", "寒露", "霜降", "立冬", "小雪", "大雪", "冬至");
85 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);
86 var nStr1 = new Array('日', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十');
87 var nStr2 = new Array('初', '十', '廿', '卅');
88 //公历节日
89 var sFtv = new Array(
90 "0101 元旦",
91 "0214 情人节",
92 "0308 妇女节",
93 "0312 植树节",
94 "0315 消费者权益日",
95 "0401 愚人节",
96 "0501 劳动节",
97 "0504 青年节",
98 "0512 护士节",
99 "0601 儿童节",
100 "0701 建党节",
101 "0801 建军节",
102 "0910 教师节",
103 "0928 孔子诞辰",
104 "1001 国庆节",
105 "1006 老人节",
106 "1024 联合国日",
107 "1224 平安夜",
108 "1225 圣诞节")
109 //农历节日
110 var lFtv = new Array(
111 "0101 春节",
112 "0115 元宵节",
113 "0505 端午节",
114 "0707 七夕情人节",
115 "0715 中元节",
116 "0815 中秋节",
117 "0909 重阳节",
118 "1208 腊八节",
119 "1224 小年")
120 //返回农历y年的总天数
121 function lYearDays(y) {
122 var i, sum = 348;
123 for (i = 0x8000; i > 0x8; i >>= 1)sum += (lunarInfo[y - 1900] & i) ? 1 : 0;
124 return (sum + leapDays(y));
125 }
126 //返回农历y年闰月的天数
127 function leapDays(y) {
128 if (leapMonth(y)) return ((lunarInfo[y - 1900] & 0x10000) ? 30 : 29);
129 else return (0);
130 }
131 //判断y年的农历中那个月是闰月,不是闰月返回0
132 function leapMonth(y) {
133 return (lunarInfo[y - 1900] & 0xf);
134 }
135 //返回农历y年m月的总天数
136 function monthDays(y, m) {
137 return ((lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29);
138 }
139 //算出当前月第一天的农历日期和当前农历日期下一个月农历的第一天日期
140 function Dianaday(objDate) {
141 var i, leap = 0, temp = 0;
142 var baseDate = new Date(1900, 0, 31);
143 var offset = (objDate - baseDate) / 86400000;
144 this.dayCyl = offset + 40;
145 this.monCyl = 14;
146 for (i = 1900; i < 2050 && offset > 0; i++) {
147 temp = lYearDays(i)
148 offset -= temp;
149 this.monCyl += 12;
150 }
151 if (offset < 0) {
152 offset += temp;
153 i--;
154 this.monCyl -= 12;
155 }
156 this.year = i;
157 this.yearCyl = i - 1864;
158 leap = leapMonth(i); //闰哪个月
159 this.isLeap = false;
160 for (i = 1; i < 13 && offset > 0; i++) {
161 if (leap > 0 && i == (leap + 1) && this.isLeap == false) { //闰月
162 --i; this.isLeap = true; temp = leapDays(this.year);
163 }
164 else {
165 temp = monthDays(this.year, i);
166 }
167 if (this.isLeap == true && i == (leap + 1)) this.isLeap = false; //解除闰月
168 offset -= temp;
169 if (this.isLeap == false) this.monCyl++;
170 }
171 if (offset == 0 && leap > 0 && i == leap + 1)
172 if (this.isLeap) { this.isLeap = false; }
173 else { this.isLeap = true; --i; --this.monCyl; }
174 if (offset < 0) { offset += temp; --i; --this.monCyl; }
175 this.month = i;
176 this.day = offset + 1;
177 }
178 //返回公历y年m+1月的天数
179 function solarDays(y, m) {
180 if (m == 1)
181 return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28);
182 else
183 return (solarMonth[m]);
184 }
185 //记录公历和农历某天的日期
186 function calElement(sYear, sMonth, sDay, week, lYear, lMonth, lDay, isLeap) {
187 this.isToday = false;
188 //公历
189 this.sYear = sYear;
190 this.sMonth = sMonth;
191 this.sDay = sDay;
192 this.week = week;
193 //农历
194 this.lYear = lYear;
195 this.lMonth = lMonth;
196 this.lDay = lDay;
197 this.isLeap = isLeap;
198 //节日记录
199 this.lunarFestival = ''; //农历节日
200 this.solarFestival = ''; //公历节日
201 this.solarTerms = ''; //节气
202 }
203 //返回某年的第n个节气为几日(从0小寒起算)
204 function sTerm(y, n) {
205 var offDate = new Date((31556925974.7 * (y - 1900) + sTermInfo[n] * 60000) + Date.UTC(1900, 0, 6, 2, 5));
206 return (offDate.getUTCDate())
207 }
208 //保存y年m+1月的相关信息
209 var fat = mat = 9;
210 var eve = 0;
211 function calendar(y, m) {
212 fat = mat = 0;
213 var sDObj, lDObj, lY, lM, lD = 1, lL, lX = 0, tmp1, tmp2;
214 var lDPOS = new Array(3);
215 var n = 0;
216 var firstLM = 0;
217 sDObj = new Date(y, m, 1); //当月第一天的日期
218 this.length = solarDays(y, m); //公历当月天数
219 this.firstWeek = sDObj.getDay(); //公历当月1日星期几
220 if ((m + 1) == 5) { fat = sDObj.getDay() }
221 if ((m + 1) == 6) { mat = sDObj.getDay() }
222 for (var i = 0; i < this.length; i++) {
223 if (lD > lX) {
224 sDObj = new Date(y, m, i + 1); //当月第一天的日期
225 lDObj = new Dianaday(sDObj); //农历
226 lY = lDObj.year; //农历年
227 lM = lDObj.month; //农历月
228 lD = lDObj.day; //农历日
229 lL = lDObj.isLeap; //农历是否闰月
230 lX = lL ? leapDays(lY) : monthDays(lY, lM); //农历当月最后一天
231 if (lM == 12) { eve = lX }
232 if (n == 0) firstLM = lM;
233 lDPOS[n++] = i - lD + 1;
234 }
235 this[i] = new calElement(y, m + 1, i + 1, nStr1[(i + this.firstWeek) % 7], lY, lM, lD++, lL);
236 if ((i + this.firstWeek) % 7 == 0) {
237 this[i].color = 'red'; //周日颜色
238 }
239 }
240 //节气
241 tmp1 = sTerm(y, m * 2) - 1;
242 tmp2 = sTerm(y, m * 2 + 1) - 1;
243 this[tmp1].solarTerms = solarTerm[m * 2];
244 this[tmp2].solarTerms = solarTerm[m * 2 + 1];
245 if ((this.firstWeek + 12) % 7 == 5) {//黑色星期五
246 this[12].solarFestival += '黑色星期五';
247 }
248 if (y == tY && m == tM) {
249 this[tD - 1].isToday = true; //今日
250 }
251 }
252 //用中文显示农历的日期
253 function cDay(d) {
254 var s;
255 switch (d) {
256 case 10:
257 s = '初十';
258 break;
259 case 20:
260 s = '二十';
261 break;
262 case 30:
263 s = '三十';
264 break;
265 default:
266 s = nStr2[Math.floor(d / 10)];
267 //s += nStr1[d % 10];
268 s += nStr1[parseInt(d % 10)];
269 break;
270 }
271 return (s);
272 }
273 //在表格中显示公历和农历的日期,以及相关节日
274 var cld;
275 function drawCld(SY, SM) {
276 var TF = true;
277 var p1 = p2 = "";
278 var i, sD, s, size;
279 cld = new calendar(SY, SM);
280 GZ.innerHTML = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;【' + Animals[(SY - 4) % 12] + '】'; //生肖
281 for (i = 0; i < 42; i++) {
282 sObj = eval('SD' + i);
283 lObj = eval('LD' + i);
284 sObj.className = '';
285 sD = i - cld.firstWeek;
286 if (sD > -1 && sD < cld.length) { //日期内
287 sObj.innerHTML = sD + 1;
288 if (cld[sD].isToday) {
289 sObj.style.color = '#9900FF'; //今日颜色
290 } else {
291 sObj.style.color = '';
292 }
293 if (cld[sD].lDay == 1) { //显示农历月
294 lObj.innerHTML = '<b>' + (cld[sD].isLeap ? '闰' : '') + cld[sD].lMonth + '月' + (monthDays(cld[sD].lYear, cld[sD].lMonth) == 29 ? '小' : '大') + '</b>';
295 }
296 else { //显示农历日
297 lObj.innerHTML = cDay(cld[sD].lDay);
298 }
299 var Slfw = Ssfw = null;
300 s = cld[sD].solarFestival;
301 for (var ipp = 0; ipp < lFtv.length; ipp++) { //农历节日
302 if (parseInt(lFtv[ipp].substr(0, 2)) === parseInt(cld[sD].lMonth)) {
303 if (parseInt(lFtv[ipp].substr(2, 4)) === parseInt(cld[sD].lDay)) {
304 lObj.innerHTML = lFtv[ipp].substr(5);
305 Slfw = lFtv[ipp].substr(5);
306 }
307 }
308 if (12 == (cld[sD].lMonth)) { //判断是否为除夕
309 if (eve == (cld[sD].lDay)) { lObj.innerHTML = "除夕"; Slfw = "除夕"; }
310 }
311 }
312 for (var ipp = 0; ipp < sFtv.length; ipp++) { //公历节日
313 if (parseInt(sFtv[ipp].substr(0, 2)) == (SM + 1)) {
314 if (parseInt(sFtv[ipp].substr(2, 4)) == (sD + 1)) {
315 lObj.innerHTML = sFtv[ipp].substr(5);
316 Ssfw = sFtv[ipp].substr(5);
317 }
318 }
319 }
320 if ((SM + 1) == 5) { //母亲节
321 if (fat == 0) {
322 if ((sD + 1) == 7) { Ssfw = "母亲节"; lObj.innerHTML = "母亲节" }
323 }
324 else if (fat < 9) {
325 if ((sD + 1) == ((7 - fat) + 8)) { Ssfw = "母亲节"; lObj.innerHTML = "母亲节" }
326 }
327 }
328 if ((SM + 1) == 6) { //父亲节
329 if (mat == 0) {
330 if ((sD + 1) == 14) { Ssfw = "父亲节"; lObj.innerHTML = "父亲节" }
331 }
332 else if (mat < 9) {
333 if ((sD + 1) == ((7 - mat) + 15)) { Ssfw = "父亲节"; lObj.innerHTML = "父亲节" }
334 }
335 }
336 if (s.length <= 0) { //设置节气的颜色
337 s = cld[sD].solarTerms;
338 if (s.length > 0) s = s.fontcolor('limegreen');
339 }
340 if (s.length > 0) { lObj.innerHTML = s; Slfw = s; } //节气
341 if ((Slfw != null) && (Ssfw != null)) {
342 lObj.innerHTML = Slfw + "/" + Ssfw;
343 }
344 }
345 else { //非日期
346 sObj.innerHTML = '';
347 lObj.innerHTML = '';
348 }
349 }
350 }
351 //在下拉列表中选择年月时,调用自定义函数drawCld(),显示公历和农历的相关信息
352 function changeCld() {
353 var y, m;
354 y = CLD.SY.selectedIndex + 1900;
355 m = CLD.SM.selectedIndex;
356 drawCld(y, m);
357 }
358 //用自定义变量保存当前系统中的年月日
359 var Today = new Date();
360 var tY = Today.getFullYear();
361 var tM = Today.getMonth();
362 var tD = Today.getDate();
363 //打开页时,在下拉列表中显示当前年月,并调用自定义函数drawCld(),显示公历和农历的相关信息
364 function initial() {
365 CLD.SY.selectedIndex = tY - 1900;
366 CLD.SM.selectedIndex = tM;
367 drawCld(tY, tM);
368 }
369 </script>
370 </body>
371
372 </html>

JavaScript实现有农历和节气节假日的日历的更多相关文章

  1. 从.net复制源代码中国农历阵列,必要做日历

    从.net复制源代码中国农历阵列,必要做日历 const { 闰月的月份.春节的阳历日期(农历正月初一).农历的每一个月天数 } c_arrLunarInfo: array [1900 .. 2100 ...

  2. C#实现万年历(农历、节气、节日、星座、属相、生肖、闰年等)

    C# 万年历 农历 节气 节日 星座 星宿 属相 生肖 闰年月 时辰等,代码如下: using System.Collections.Generic; using System.Text; using ...

  3. javascript 公历与农历相互转换工具类

    /** * 公历[1900-1-31,2100-12-31]时间区间内的公历.农历互转 * @charset UTF-8 * @Author Jea杨(JJonline@JJonline.Cn) * ...

  4. C#实现万年历(农历、节气、节日、星座、星宿、属相、生肖、闰年月、时辰)

    C# 万年历 农历 节气 节日 星座 星宿 属相 生肖 闰年月 时辰地址:http://www.cnblogs.com/txw1958/archive/2013/01/27/csharp-calend ...

  5. python3实现万年历(包括公历、农历、节气、节日)

    #!/usr/local/bin/python3 # coding=utf-8 # Created: 20/07/2012 # Copyright: http://www.cnblogs.com/tx ...

  6. FullCalendar应用——整合农历节气和节日

    FullCalendar用来做日程管理功能非常强大,但是唯一不足的地方是没有将中国农历历法加进去,今天我将结合实例和大家分享如何将中国农历中的节气和节日整合到FullCalendar中,从而增强其实用 ...

  7. [转]显示农历日期的JS

    本文转自:http://blog.sina.com.cn/s/blog_47377e77010009xc.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD ...

  8. JavaScript日期组件的实现

    旅游频道的开发中需要定义各种日期组件,有的是基本的日期选择, 这个基本日期只包含如下功能 左右翻(月) 点击天回填到输入域 点击“今天”,回填今天的日期到输入域 点击“关闭”,日期控件关闭 有的同时显 ...

  9. Google日历添加农历、节日和天气插件(步骤)

    Google日历添加农历.节日和天气插件(步骤) Google功能非常多,Google日历只是其中一个,而且支持Exchange账户(iPhone,WP7,诺基亚等)和Google账户登录(andro ...

随机推荐

  1. java IO流体系--通识篇

    1.I/O流是什么 Java的I/O流是实现编程语言的输入/输出的基础能力,操作的对象有外部设备.存储设备.网络连接等等,是所有服务器端的编程语言都应该具备的基础能力. I = Input(输入),输 ...

  2. 面试题详解:如何用Redis实现分布式锁?

    说一道常见面试题: 使用Redis分布式锁的详细方案是什么? 一个很简单的答案就是去使用 Redission 客户端.Redission 中的锁方案就是 Redis 分布式锁的比较完美的详细方案. 那 ...

  3. EXSI6.7 中给虚拟机磁盘扩容

    [admin@localhost ~]$ sudo fdisk -l Disk /dev/sda: 214.7 GB, 214748364800 bytes, 419430400 sectors Un ...

  4. centos7 安装 nginx-1.18.0 并设置开机自启动

    一.到官网下载nginx Mainline  version:  nginx主力版本,为开发版 Stable version: 稳定版,在生产环境中选择此版本进行安装 Legacy versions: ...

  5. Kotlin笔记小结(For Java Developer)

    这篇文章为kotlin学习记录,主要针对的是自己的知识盲区,不适用于新手. 文中所有demo均来自于kotlin官网 类型 整形 Type Size (bits) Min value Max valu ...

  6. vue3-关于使用element-plus第三方组件库时出现的一些问题的解决方案(1)

    这只是在使用element-plus组件开发过程中遇到的第一个问题,后面遇到更多问题及解决方案时会再同步到博客上来 --------------我是分割线------------------ 今天用到 ...

  7. Gin 09 HTTP 重定向

    gin http 重定向有两种方法,重写url 和 不重写的跳转.两种方法,gin 通过两个内置方法实现: demo package main import ( "github.com/gi ...

  8. MongoDB 事务机制

    MongoDB 从4.0 版本开始 副本集支持多文档事务,4.2 版本开始分片集群也支持多文档事务.单个集合的单个文档事务 在 1.x 就支持. 以下是跟 mongo 事务相关的一些概念: 1. Wr ...

  9. 论文解读《Cauchy Graph Embedding》

    Paper Information Title:Cauchy Graph EmbeddingAuthors:Dijun Luo, C. Ding, F. Nie, Heng HuangSources: ...

  10. NaviCat连接提示驱动程序IM004错误

    今天一打开NaviCat提示驱动程序IM004错误,百度了好几种方法都不起作用,多次尝试后总结出一套方法: 一.到控制面板--卸载程序--卸载NaviCat Clien 注意可能有多个版本的,2008 ...