Ich habe es auch versucht und viel gewonnen. Nachdem ich die Implementierungsprinzipien der JS -Kalender -Spezialeffekte gemeistert habe, möchte ich weitere Funktionen hinzufügen und es frei spielen. Lassen Sie mich es zuerst hier teilen. Wenn Sie interessiert sind, können Sie es versuchen!
Dieser Artikel teilt die Beispiele von JS zur Implementierung von Kalendereffekten mit Mondkalendern und anderen Informationen. Das Codevolumen ist für Ihre Referenz sehr groß. Der spezifische Inhalt ist wie folgt
Reproduktionsbild:
Implementierungscode:
<Html> <kopf> <titels> Perpetual Calender </title> <meta content = "Mondkalender; Solarkalender; monatlicher Kalender; Festival; Zeitzone; Solar Begriff; acht Charaktere; Stamme und Zweige; Tierkreis; Gregorian Solar; chinesische Lunar; Kalender;" name = keywords> <meta content = alle name = roboots> <meta content = "Gregorianischer Solarkalender und chinesischer Mondkalender" name = Beschreibung> <meta charset = "utf-8"/> <style type = "text/csS"> body {margin: 0px; Polsterung: 0px; } </style> </head> <body> <center> <br> <table CellPadding = "0" cellpacing = "0" id = "1"> <tr> <td> <style> #cal {width: 434px; Grenze: 1PX Solid #C3D9ff; Schriftgröße: 12px; Rand: 8px 0 0 15px; } #cal #top {Höhe: 29px; Zeilenhöhe: 29px; Hintergrund: #e7eef8; Farbe: #003784; Padding-Links: 30px; } #cal #top select {font-size: 12px; } #cal #top Eingabe {padding: 0; } #cal ul #wk {margin: 0; Polsterung: 0; Höhe: 25px; } #cal ul #wk li {float: links; Breite: 60px; Text-Align: Mitte; Zeilenhöhe: 25px; Listenstil: Keine; } #cal ul #wk li b {Schriftgewicht: normal; Farbe: #C60B02; } #cal #cm {klare: links; Border-Top: 1PX Solid #ddd; Border-Bottom: 1PX gepunktet #ddd; Position: Relativ; } #cal #cm .cell {Position: absolut; Breite: 42px; Höhe: 36px; Text-Align: Mitte; Rand: 0 0 0 9px; } #cal #cm .cell .so {font: BOLD 16PX ARIAL; } #cal #bm {text-align: rechts; Höhe: 24px; Zeilenhöhe: 24px; Polsterung: 0 13px 0 0; } #cal #bm a {color: 7977ce; } #cal #fd {display: keine; Position: absolut; Grenze: 1PX Solid #ddddf; Hintergrund: #feffcd; Polsterung: 10px; Zeilenhöhe: 21px; Breite: 150px; } #cal #fd b {Schriftgewicht: normal; Farbe: #C60A00; } </style> <!-[if IE]> <style> #cal #top {padding-top: 4px;} #cal #top Eingabe {width: 65px;} #cal #fd {width: 170px;} </style> <[endif]-> <div id = " id = "top"> agenda <Select> </select> Jahr <Select> </select> Jahr <Select> </select> Jahr <Select> </select> Jahr </select> </select> Jahr </select> Jahr </select> </select> Jahr </select> </select> Jahr </select> Jahr </select> </select> ye AR <SELECT> </select> Jahr </select> </select> Jahr <Select> </select> Jahr </select> </select> Jahr <Select> </select> Jahr </select> </select> Jahr </select> Jahr </select> </select> Jahr </select> </select> Jahr </select> Jahr </s. </s Auswahl> Jahr <Select> </select> Jahr <Select> </select> Jahr </select> </select> Jahr <Select> </select> Jahr </select> </select> Jahr <Select> </select> Jahr </select> </select> Jahr </select> Jahr </select> </select> Jahr </select> Jahr <Se LECT> </select> Jahr <Select> </select> Jahr <Select> </select> Jahr <Select> </select> Jahr <Select> </select> Jahr </select> </select> Jahr </select> Jahr </select> </select> Jahr </select> Jahr </select> </select> Jahr </select> </select> </select> </select> </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")! 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, 0x0a50, 0x1b255, 0x06d20, 0x0a0, 0x14b63]; Ding wu ji geng xin rui "; var j =" zi chou yin mao chen si wu wei shen du xu hai "; var o =" Ratte, Ochse, Tiger, Kaninchen, Drache, Schlange, Pferd, Schaf, Affen, Hühnchen, Hunde, Schwein, Schwein. "Qingming", "großer Regen", "Beginn des Sommers", "kleiner Mann", "Körnern Samen", "Sommer Sonneneinstrahlung", "kleine Hitze", "Große Hitze", "Großer Hitze", "Bird of Autumn", "Dragon Heat", "Frost Dew", "Frost Dew", "Bird of Winter", Light Snow "," High Snow "," High Snow ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", "," 63836, 85337, 107014, 128867, 150921, 173149, 195551, 218072, 240693, 263343, 285989, 308563. 483532, 504758] var b = "Tag eins, drei, drei, sechs, sieben, acht, neunzig"; "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". "*2 Spring Festival", "0115": "Lantern Festival", "0505": "*1 Dragon Boat Festival", "0815": "*1 Mid-Autumn Festival", "0909": "Double Ninth Festival", "1208": "Laba festival", y. y) y «° C. var H = neues Datum (31556925974.7 * (J - 1900) + d [i] * 60000) Date.utc (1900, 0, 6, 5)); H)? 15)} Funktion E (i, h) {return (P [i - 1900] & (65536 >> H)? 30: 29)} Funktion C (m) {var k, j = 0, H = 0; 2050 && n> 0; (j> 0 && k == (j + 1) && this.isleap = false) {--K; }} if (n == 0 && j> 0 && k == j + 1) {if (this.isleap) {this.isleap = false} else {this.isleap = true; 10? "DD": return g (h.getDate); = "Zwanzig"; "M"); Diese. this.lunardate); this.restdays = 0; "D") {this.showinlunar = this.jieqi = l [(this.Solarmonth - 1) * 2 + 1]} if (c (this.Solaryear, (this.SolarmonTh - 1) * 2 + 1]} if (this.showinLunar == "qingways") {this. } 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; } Funktion C (a, b) {A.SetDate (A.getDate () B); G (A.Solaryear, A.Solarmonth- 1)) / 7); X.DATEARRAY [E] = NULL; {init: function (a) {z (a)}, getJson: function () {return x}}}) (); M ("top") } Funktion B (g) {C [G.Solaryear - 1901]. Selected = true; U (neuer Datum (J, 3, 1)); Date (); "Ausgewählt"} C.AppendChild (h)} für (var j = 1; j <13; j ++) {var h = r ("Option"); D (G.Solaryear, G.Solarmonth); N = (function () {function c () {var z = q.getJson (); var c = z.datearray; m ("cm"). = R ("div"); 2 + "px"; Y.Style.color = "#666"; M ("cm"). AppendChild (x)} var g = r ("div"); {var b = /(*+?^=! (typeof (c) == "Objekt") {return e.Replace (a, function "#{Solaryear} Jahr#{Solarmonth} Monats#{Solardate} Tag {SolarWeekdayinchinese}"; "<br>#{ganzhiyear} Jahr#{ganzhimonth} Monat#{ganzhidat} Tag"; #{jieqi} </b> "} c.innerHtml = y (c, a); c.style.top = z.offsettop + z.offseteight - 5 +" px "; = "keine"} return {show: function (z) {g (z)}, hide: function () {x ()}, init: function (z) {c = z}}) (); "http://zh.wikipedia.org/zh-cn/" + x.Solarmonth + "%e6%9c%88" + X.Solardat + "%e6%97%a5"} windel.attachEvent ("onload", function () {W.Reset (a)})} W.Init (a);Das obige dreht sich alles um diesen Artikel. Ich hoffe, dass es für alle hilfreich sein wird, JavaScript -Programme zu lernen.