I also tried it and gained a lot. After mastering the implementation principles of the js calendar special effects, I want to add more functions and can play it freely. Let me share it here first. If you are interested, you can try it!
This article shares the examples of JS to implement calendar effects with lunar calendars and other information. The code volume is very large for your reference. The specific content is as follows
Reproduction image:
Implementation code:
<HTML> <HEAD> <TITLE>Perpetual Calendar</TITLE> <META content="Lunar calendar; solar calendar; monthly calendar; festival; time zone; solar term; eight characters; stems and branches; zodiac; gregorian solar; chinese lunar; calendar;" name=keywords> <META content=All name=robots> <META content="gregorian solar calendar and chinese lunar calendar" name=description> <meta charset="UTF-8"/> <style type="text/css"> body { margin: 0px; padding: 0px; } </style> </head> <body> <center><br> <table cellpadding="0" cellpacing="0" id="1"> <tr> <td> <style> #cal { width: 434px; border: 1px solid #c3d9ff; font-size: 12px; margin: 8px 0 0 15px; } #cal #top { height: 29px; line-height: 29px; background: #e7eef8; color: #003784; padding-left: 30px; } #cal #top select { font-size: 12px; } #cal #top input { padding: 0; } #cal ul#wk { margin: 0; padding: 0; height: 25px; } #cal ul#wk li { float: left; width: 60px; text-align: center; line-height: 25px; list-style: none; } #cal ul#wk li b { font-weight: normal; color: #c60b02; } #cal #cm { clear: left; border-top: 1px solid #ddd; border-bottom: 1px dotted #ddd; position: relative; } #cal #cm .cell { position: absolute; width: 42px; height: 36px; text-align: center; margin: 0 0 0 9px; } #cal #cm .cell .so { font: bold 16px arial; } #cal #bm { text-align: right; height: 24px; line-height: 24px; padding: 0 13px 0 0; } #cal #bm a { color: 7977ce; } #cal #fd { display: none; position: absolute; border: 1px solid #ddddf; background: #feffcd; padding: 10px; line-height: 21px; width: 150px; } #cal #fd b { font-weight: normal; color: #c60a00; } </style> <!--[if IE]><style>#cal #top{padding-top:4px;}#cal #top input{width:65px;}#cal #fd{width:170px;}</style><![endif]--> <div id="cal"> <div id="top">Agenda<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select>Year<select></select> c({'fm':'alop','title':this.innerHTML,'url':this.href,'p1':al_c(this),'p2':1})" href="javascript:void(0)">Today in history</a></div> </div> </td> </td> </tr> </table> </table> </center> </body> <script language="JavaScript"><!--(function() { var S = navigator.userAgent.indexOf("MSIE") != -1 && !window.opera; function M(C) { return document.getElementById(C) } function R(C) { return document.createElement(C) } var P = [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, 0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0a2, 0x095b0, 0x14977, 0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, 0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, 0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, 0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, 0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, 0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, 0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, 0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0, 0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, 0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, 0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, 0x05aa0, 0x076a3, 0x096d0, 0x04bd7, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, 0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0a0, 0x14b63]; var K = "Jia Yi Bing Ding Wu Ji Geng Xin Ren Gui"; var J = "Zi Chou Yin Mao Chen Si Wu Wei Shen You Xu Hai"; var O = "Rat, Ox, Tiger, Rabbit, Dragon, Snake, Horse, Sheep, Monkey, Chicken, Dog, Pig"; var L = ["Little Cold", "Great Cold", "Bird Spring", "Rain Water", "Jingzhe", "Spring Equinox", "Qingming", "Great Rain", "Beginning of Summer", "Little Man", "Graining Seeds", "Summer Solar", "Little Heat", "Large Heat", "Great Heat", "Bird of Autumn", "Dragon Heat", "Frost Dew", "Frost Dew", "Bird of Winter", "Light Snow", "High Snow", "Winter Solstice"]; var D = [0, 21208, 43467, 63836, 85337, 107014, 128867, 150921, 173149, 195551, 218072, 240693, 263343, 285989, 308563, 331033, 353350, 375494, 397447, 419210, 440795, 462224, 483532, 504758]; var B = "Day one, two, three, three, four, six, seven, eight, ninety"; var H = ["Original", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten", "Ten", "Eleven", "Lar"]; var E = "Tenth, 233"; var V = { "0101": "*1 New Year's Day", "0214": "Valentine's Day", "0305": "Learn from Lei Feng's Memorial Day", "0308": "Women's Day", "0312": "Arbor Day", "0315": "Consumer Rights Day", "0401": "April's Day", "0501": "*1 Labor Day", "0504": "Youth Day", "0601": "International Children's Day", "0701": "Birthday of the Communist Party of China", "0801": "Army Day", "0910": "China Teachers' Day", "1001": "*3 National Day", "1224": "Christmas Eve", "1225": "Christmas" }; var T = { "0101": "*2 Spring Festival", "0115": "Lantern Festival", "0505": "*1 Dragon Boat Festival", "0815": "*1 Mid-Autumn Festival", "0909": "Double Ninth Festival", "1208": "Laba Festival", "0100": "New Year's Eve" }; function U(Y) { function c(j, i) { var h = new Date((31556925974.7 * (j - 1900) + D[i] * 60000) + Date.UTC(1900, 0, 6, 2, 5)); return (h.getUTCDate()) } function d(k) { var h, j = 348; for (h = 32768; h > 8; h >>= 1) { j += (P[k - 1900] & h) ? 1 : 0 } return (j + b(k)) } function a(h) { return (K.charAt(h % 10) + J.charAt(h % 12)) } function b(h) { if (g(h)) { return ((P[h - 1900] & 65536) ? 30 : 29) } else { return (0) } } function g(h) { return (P[h - 1900] & 15) } function e(i, h) { return ((P[i - 1900] & (65536 >> h)) ? 30 : 29) } function C(m) { var k, j = 0, h = 0; var l = new Date(1900, 0, 31); var n = (m - l) / 86400000; this.dayCyl = n + 40; this.monCyl = 14; for (k = 1900; k < 2050 && n > 0; k++) { h = d(k); n -= h; this.monCyl += 12 } if (n < 0) { n += h; k--; this.monCyl -= 12 } this.year = k; this.yearCyl = k - 1864; j = g(k); this.isLeap = false; for (k = 1; k < 13 && n > 0; k++) { if (j > 0 && k == (j + 1) && this.isLeap == false) { --k; this.isLeap = true; h = b(this.year) } else { h = e(this.year, k) } if (this.isLeap == true && k == (j + 1)) { this.isLeap = false } n -= h; if (this.isLeap == false) { this.monCyl++ } } if (n == 0 && j > 0 && k == j + 1) { if (this.isLeap) { this.isLeap = false } else { this.isLeap = true; --k; --this.monCyl } } if (n < 0) { n += h; --k; --this.monCyl } this.month = k; this.day = n + 1 } function G(h) { return h < 10 ? "0" + h : h } function f(i, j) { var h = i; return j.replace(/dd?d?d?|MM?M?M?|yy?y?y?y?/g, function(k) { switch (k) { case "yyyy": var l = "000" + h.getFullYear(); return l.substring(l.length - 4); case "dd": return G(h.getDate()); case "d": return h.getDate().toString(); case "MM": return G((h.getMonth() + 1)); case "M": return h.getMonth() + 1 } }) } function Z(i, h) { var j; switch (i, h) { case 10: j = "Twenty"; break; case 20: j = "Twenty"; break; case 30: j = "Thirty"; break; default: j = E.charAt(Math.floor(h / 10)); j += B.charAt(h % 10) } return (j) } this.date = Y; this.isToday = false; this.isRestDay = false; this.solarYear = f(Y, "yyyy"); this.solarMonth = f(Y, "M"); this.solarDate = f(Y, "d"); this.solarWeekDay = Y.getDay(); this.solarWeekDayInChinese = "Weekday" + B.charAt(this.solarWeekDay); var X = new C(Y); this.lunarYear = X.year; this.shengxiao = O.charAt((this.lunarYear - 4) % 12); this.lunarMonth = X.month; this.lunarIsLeapMonth = X.isLeap; this.lunarMonthInChinese = this.lunarIsLeapMonth ? "Leap" + H[X.month - 1] : H[X.month - 1]; this.lunarDate = X.day; this.showInLunar = this.lunarDateInChinese = Z(this.lunarMonth, this.lunarDate); if (this.lunarDate == 1) { this.showInLunar = this.lunarMonthInChinese + "month" } this.ganzhiYear = a(X.yearCyl); this.ganzhiMonth = a(X.monCyl); this.ganzhiDate = a(X.dayCyl++); this.jieqi = ""; this.restDays = 0; if (c(this.solarYear, (this.solarMonth - 1) * 2) == f(Y, "d")) { this.showInLunar = this.jieqi = L[(this.solarMonth - 1) * 2] } if (c(this.solarYear, (this.solarMonth - 1) * 2 + 1) == f(Y, "d")) { this.showInLunar = this.jieqi = L[(this.solarMonth - 1) * 2 + 1] } if (c(this.solarYear, (this.solarMonth - 1) * 2 + 1] } if (this.showInLunar == "Qingming") { this.showInLunar = "Qingming Festival"; this.restDays = 1 } this.solarFestival = V[f(Y, "MM") + f(Y, "dd")]; if (typeof this.solarFestival == "undefined") { this.solarFestival = "" } else { if (//*(/d)/.test(this.solarFestival)) { this.restDays = parseInt(RegExp.$1); this.solarFestival = this.solarFestival.replace(//*/d/, "") } } this.showInLunar = (this.solarFestival == "") ? this.showInLunar : this.solarFestival; this.lunarFestival = T[this.lunarIsLeapMonth ? "00" : G(this.lunarMonth) + G(this.lunarDate)]; if (typeof this.lunarFestival == "undefined") { this.lunarFestival = "" } else { if (//*(/d)/.test(this.lunarFestival)) { this.restDays = (this.restDays > parseInt(RegExp.$1)) ? this.restDays : parseInt(RegExp.$1); this.lunarFestival = this.lunarFestival.replace(//*/d/, "") } } if (this.lunarMonth == 12 && this.lunarDate == e(this.lunarYear, 12)) { this.lunarFestival = T["0100"]; this.restDays = 1 } this.showInLunar = (this.lunarFestival == "") ? this.showInLunar : this.lunarFestival; this.showInLunar = (this.showInLunar.length > 4) ? this.showInLunar.substr(0, 2) + "..." : this.showInLunar } var Q = (function() { var X = {}; X.lines = 0; X.dateArray = new Array(42); function Y(a) { return (((a % 4 === 0) && (a % 100 !== 0)) || (a % 400 === 0)) } function G(a, b) { return [31, (Y(a) ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 31, 30, 31][b] } function C(a, b) { a.setDate(a.getDate() + b); return a } function Z(a) { var f = 0; var c = new U(new Date(a.solarYear, a.solarMonth - 1, 1)); var d = (c.solarWeekDay - 1 == -1) ? 6 : c.solarWeekDay - 1; X.lines = Math.ceil((d + G(a.solarYear, a.solarMonth - 1)) / 7); for (var e = 0; e < X.dateArray.length; e++) { if (c.restDays != 0) { f = c.restDays } if (f > 0) { c.isRest = true } if (d-- > 0 || c.solarMonth != a.solarMonth) { X.dateArray[e] = null; continue } var b = new U(new Date()); if (c.solarYear == b.solarYear && c.solarMonth == b.solarMonth && c.solarDate == b.solarDate) { c.isToday = true } X.dateArray[e] = c; c = new U(C(c.date, 1)); f-- } } return { init: function(a) { Z(a) }, getJson: function() { return X } } })(); var W = (function() { var C = M("top").getElementsByTagName("SELECT")[0]; var X = M("top").getElementsByTagName("SELECT")[1]; var G = M("top").getElementsByTagName("SPAN")[0]; var c = M("top").getElementsByTagName("SPAN")[1]; var Y = M("top").getElementsByTagName("INPUT")[0]; function a(g) { G.innerHTML = g.ganzhiYear; c.innerHTML = g.shengxiao } function b(g) { C[g.solarYear - 1901].selected = true; X[g.solarMonth - 1].selected = true } function f() { var j = C.value; var g = X.value; var i = new U(new Date(j, g - 1, 1)); Q.init(i); N.draw(); if (this == C) { i = new U(new Date(j, 3, 1)); G.innerHTML = i.ganzhiYear; c.innerHTML = i.shengxiao } var h = new U(new Date()); Y.style.visibility = (j == h.solarYear && g == h.solarMonth) ? "hidden" : "visible" } function Z() { var g = new U(new Date()); a(g); b(g); Q.init(g); N.draw(); Y.style.visibility = "hidden" } function d(k, g) { for (var j = 1901; j < 2050; j++) { var h = R("OPTION"); h.value = j; h.innerHTML = j; if (j == k) { h.selected = "selected" } C.appendChild(h) } for (var j = 1; j < 13; j++) { var h = R("OPTION"); h.value = j; h.innerHTML = j; if (j == g) { h.selected = "selected" } X.appendChild(h) } C.onchange = f; X.onchange = f } function e(g) { d(g.solarYear, g.solarMonth); G.innerHTML = g.ganzhiYear; c.innerHTML = g.shengxiao; Y.onclick = Z; Y.style.visibility = "hidden" } return { init: function(g) { e(g) }, reset: function(g) { b(g) } } })(); var N = (function() { function C() { var Z = Q.getJson(); var c = Z.dateArray; M("cm").style.height = Z.lines * 38 + 2 + "px"; M("cm").innerHTML = ""; for (var a = 0; a < c.length; a++) { if (c[a] == null) { continue } var X = R("DIV"); if (c[a].isToday) { X.style.border = "1px solid #a5b9da"; X.style.background = "#c1d9ff" } X.className = "cell"; X.style.left = (a % 7) * 60 + "px"; X.style.top = Math.floor(a / 7) * 38 + 2 + "px"; var b = R("DIV"); b.className = "so"; b.style.color = ((a % 7) > 4 || c[a].isRest) ? "#c60b02" : "#313131"; b.innerHTML = c[a].solarDate; X.appendChild(b); var Y = R("DIV"); Y.style.color = "#666"; Y.innerHTML = c[a].showInLunar; X.appendChild(Y); X.onmouseover = (function(d) { return function(f) { F.show({ dateIndex: d, cell: this }) } })(a); X.onmouseout = function() { F.hide() }; M("cm").appendChild(X) } var G = R("DIV"); G.id = "fd"; M("cm").appendChild(G); F.init(G) } return { draw: function(G) { C(G) } } })(); var F = (function() { var C; function Y(e, c) { if (arguments.length > 1) { var b = /([.*+?^=!:${}()|[/]////])/g, Z = "{".replace(b, "//$1"), d = "}".replace(b, "//$1"); var a = new RegExp("#" + Z + "([^" + Z + d + "]+)" + d, "g"); if (typeof(c) == "object") { return e.replace(a, function(f, h) { var g = c[h]; return typeof(g) == "undefined" ? "" : g }) } } return e } function G(b) { var a = Q.getJson().dateArray[b.dateIndex]; var Z = b.cell; var c = "#{solarYear}year#{solarMonth}month#{solarDate}day#{solarWeekDayInChinese}"; c += "<br><b>Lunar#{lunarMonthInChinese}month#{lunarDateInChinese}</b>"; c += "<br>#{ganzhiYear}year#{ganzhiMonth}month#{ganzhiDate}day"; if (a.solarFestival != "" || a.lunarFestival != "" || a.jieqi != "") { c += "<br><b>#{lunarFestival} #{solarFestival} #{jieqi}</b>" } C.innerHTML = Y(c, a); C.style.top = Z.offsetTop + Z.offsetHeight - 5 + "px"; C.style.left = Z.offsetLeft + Z.offsetWidth - 5 + "px"; C.style.display = "block" } function X() { C.style.display = "none" } return { show: function(Z) { G(Z) }, hide: function() { X() }, init: function(Z) { C = Z } } })(); var I = (function() { var G = M("bm").getElementsByTagName("A")[0]; function C(X) { G.href = "http://zh.wikipedia.org/zh-cn/" + X.solarMonth + "%E6%9C%88" + X.solarDate + "%E6%97%A5" } return { setLink: function(X) { C(X) } } })(); var A = new U(new Date()); if (S) { window.attachEvent("onload", function() { W.reset(A) }) } W.init(A); Q.init(A); N.draw(); I.setLink(A)})();//--></script></html>The above is all about this article, I hope it will be helpful for everyone to learn JavaScript programming.