También lo probé y gané mucho. Después de dominar los principios de implementación de los efectos especiales del calendario JS, quiero agregar más funciones y puedo jugarlo libremente. Déjame compartirlo aquí primero. Si está interesado, ¡puede probarlo!
Este artículo comparte los ejemplos de JS para implementar los efectos del calendario con calendarios lunares y otra información. El volumen del código es muy grande para su referencia. El contenido específico es el siguiente
Imagen de reproducción:
Código de implementación:
<html> <cead> <title> Calendario perpetuo </title> <meta content = "calendario lunar; calendario solar; calendario mensual; festival; zona horaria; término solar; ocho caracteres; tallos y ramas; zodiaco; solar gregoriano; lunar chino; calendario;"; " name = Keywords> <meta content = all name = robots> <meta content = "calendario solar gregoriano y calendario lunar chino" name = descripción> <meta charset = "utf-8"/> <style type = "text/css"> cuerpo {margen: 0px; relleno: 0px; } </style> </head> <body> <center> <br> <table cellPadding = "0" cellPacing = "0" id = "1"> <tr> <td> <syle> #cal {width: 434px; Border: 1px Solid #C3D9FF; tamaño de fuente: 12px; margen: 8px 0 0 15px; } #cal #top {altura: 29px; Línea de altura: 29px; Antecedentes: #E7EEF8; Color: #003784; ROLED-LAFUERA: 30px; } #cal #top select {font-size: 12px; } #cal #top entrada {relleno: 0; } #cal ul #wk {margen: 0; relleno: 0; Altura: 25px; } #cal ul #wk li {float: izquierda; Ancho: 60px; Text-Align: Center; Línea de altura: 25px; Estilo de lista: Ninguno; } #cal ul #wk li b {font-weight: normal; Color: #C60B02; } #cal #cm {claro: izquierda; border-top: 1px sólido #ddd; Border-Bottom: 1px punteado #ddd; Posición: relativo; } #cal #cm .Cell {posición: Absolute; Ancho: 42px; Altura: 36px; Text-Align: Center; margen: 0 0 0 9px; } #cal #cm .Cell .SO {Font: Bold 16px Arial; } #cal #bm {text-align: right; Altura: 24px; Línea-aguja: 24px; relleno: 0 13px 0 0; } #cal #bm a {color: 7977ce; } #cal #fd {display: none; Posición: Absoluto; borde: 1px sólido #ddddf; Antecedentes: #feffcd; relleno: 10px; Línea de altura: 21px; Ancho: 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]-> <d "cal"> <Div Div id = "top"> agenda <select> </select> año <ectelect> </select> año <select> </select> año <select> </select> año <select> </elect> año <ectelect> </elect> año <ectelead> </select> año <ectele select> </select> año <select> </select> año <select> </select>> ye AR <Select> </Select> Year <Select> </Select> Year <Select> </Select> Year <Select> </Select> Year <Select> </select> año <Enect> </select> año <elect> </select> año <select> </select> año <select> </select> año <select> </select> año <ectelead> </s Electo> año <select> </select> año <select> </select> año <ectelead> </select> año <select> </select> año <ecteling> </select> año <ectelead> </elect> año <elect> </select> año <select> </select> año <elect> </select> año <ectelead> </select> año <E Se. LECT> </SELECT> Año <Select> </SELECT> Año <Enect> </SELECT> AÑO <SELECT> </SELECCIONE> AÑO <SELECT> </SELECT> AÑO <SELECT> </SELECT> Año <Enect> </SELECT> AÑO <SELECT> </SELECT> AÑO <SELECT> </SELECT> AÑO <SELECT> </SELECT> AÑO <SELECT> </SELECT> </section> c ({'fm': 'alop', 'title': this.innerhtml, 'url': this.href, 'p1': al_c (this), 'p2': 1}) "href =" javascript: void (0) "> hoy en la historia </a> </div> </div> </td> </td> </tr> </table </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, 0x0d6a 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, 0x0ab50, 0x0ab50, 0x0ab50, 0x0ab50, 0x0ab50, 0x0ab50, 0x0ab50. 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, 0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d5580d5580d5580d5580d5580d5580d5558 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, 0x0aa550, 0x1b255, 0x06d20, 0x0a0, 0x14b63]; 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", "Graning Seeds", "Summer Solar", "Little Heat", "Garm Heat", "Great Heat", "Bird of Autumn", "Dragon Heat", "Frost Dew", "Frost Dew", "Bird of Winter", Light Snow "," High Snow "," Winter Solstice "]; 63836, 85337, 107014, 128867, 150921, 173149, 1955551, 218072, 240693, 263343, 285989, 308563, 331033, 3533350, 375494, 397447, 419210, 440795, 462224524522455555555555555555555N. 483532, 504758]; "0101": "*1 Día de Año Nuevo", "0214": "Día de San Valentín", "0305": "Aprenda del Día de los Caídos de Lei Feng", "0308": "Día de la Mujer", "0312": "Día del Arbor", "0315": "Día de los derechos de los consumidores", "0401": "Día de abril", "0501": "1 1 1 1 1 Trabajo en los derechos de los derechos", "." "0504": "Día de la juventud", "0601": "Día internacional del niño", "0701": "Cumpleaños del Partido Comunista de China", "0801": "Día del Ejército", "0910": "Día de los maestros de China", "1001": "*3 Día Nacional", "1224": "Navidad", "1225": "Navidad"; "*2 Festival de primavera", "0115": "Festival Lantern", "0505": "*1 Dragon Boat Festival", "0815": "*1 Festival de Autumno de Medio", "0909": "Double Noveno Festival", "1208": "Festival Laba", "0100": "Eve de anual"}; h = nueva fecha ((31556925974.7 * (j - 1900) + d [i] * 60000) + date.utc (1900, 0, 6, 2, 5)); h)? 15)} Función E (i, H) {return ((P [i - 1900] & (65536 >> h)) 2050 && n> 0; (j> 0 && k == (j + 1) && this.eSeap == false) {--k; }} if (n == 0 && j> 0 && k == j + 1) {if (this.iseap) {this.eSeap = false} else {this.iseAp = true. 10? "dd": return g (h.getDate ()); = "Veinte"; "M"); this.lUnarmonth = X.Month; this.lunardate); this.restdays = 0; "d")) {this.showinlunar = this.jieqi = l [(this.sOrmonth - 1) * 2 + 1]} if (c (this.solararyear, (this.sOnmonth - 1) * 2 + 1]} if (this.showinlunar == "qingming") } this.solarfestival = v [f (y, "mm") + f (y, "dd")]; this.solarfestival = this.solarfestival.replace (//*/d/, "")}} this.showinlunar = (this.solarfestival == "") G (this.lunardate)]; parseint (regexp. $ 1); this.showinlunar = (this.lunarfestival == "")? X.lines = 0; } función c (a, b) {a.setDate (a.getDate () + b); G (a.solararear, a.sOnmonth- 1)) / 7); X.datearray [e] = null; {init: function (a) {z (a)}, getJson: function () {return x}}}) (); M ("Top"). GetElmentSByTagName ("Span") [0]; } función b (g) {c [g.solararyear - 1901] .selected = true; Fecha (j, 3, 1)); A (g) C.AppendChild (h)} para (var j = 1; j <13; j ++) {var h = r ("opción"); G.SOlmonth); C () {var z = q.getJson (); if (c [a] .istoday) {x.style.border = "1px sólido #a5b9da"; R ("Div"); Y.innerhtml = c [a] .showinlunar; var g = r ("div"); /(bar. "Object") {return E.replace (a, function (f, h) {var g = c [h]; return typeOf (g) == "Undefinado"? "": g})}} return e} function g (b) "#{solaryear} año#{solarmonth} mes#{solardate} Day#{SolarWeekDayInChinese}"; "<br>#{ganzhiyear} año#{ganzhimonth} mes#{ganzhidate} day"; #{jieqi} </b> "} c.innerhtml = y (c, a); c.style.top = Z.OffSettop + Z.OffSetheTight - 5 +" Px "; c.Style.left = Z.OffSetleft + Z.OffSetWidth - 5 +" Px "; C.Style.dislay =" Bloch "} Función X () "Ninguno"} return {show: function (z) {g (z)}, escondite: function () {x ()}, init: function (z) {c = z}}}) () (); "http://zh.wikipedia.org/zh-cn/" + x.solarmonth Window.attachevent ("onload", function () {w.reset (a)})} w.init (a);Lo anterior se trata de este artículo, espero que sea útil para todos aprender la programación de JavaScript.