Je l'ai également essayé et j'ai gagné beaucoup. Après avoir maîtrisé les principes de mise en œuvre des effets spéciaux du calendrier JS, je veux ajouter plus de fonctions et je peux le jouer librement. Permettez-moi de le partager ici d'abord. Si vous êtes intéressé, vous pouvez l'essayer!
Cet article partage les exemples de JS pour mettre en œuvre des effets de calendrier avec des calendriers lunaires et d'autres informations. Le volume de code est très important pour votre référence. Le contenu spécifique est le suivant
Image de reproduction:
Code d'implémentation:
<Html> <A-Head> <Title> Perpetual Calendar </Title> <Meta Content = "Lunar Calendar; Solar Calendar; Calendar mensuel; Festival; Finonyhage; Terme solaire; huit caractères; tiges et branches; zodiaque; Gregorian Solar; Lunar chinois; calendar;" name = keywords> <meta content = all name = robots> <meta content = "grégorian solar calendar and chine lunar calendar" name = Description> <meta charset = "utf-8" /> <style type = "text / css"> body {margin: 0px; rembourrage: 0px; } </ style> </ head> <body> <nentre> <br> <table CellPadding = "0" Cellpacing = "0" id = "1"> <tr> <td> <style> #cal {width: 434px; Border: 1px solide # c3d9ff; taille de police: 12px; marge: 8px 0 0 15px; } #cal #top {hauteur: 29px; hauteur de ligne: 29px; Contexte: # E7EEF8; Couleur: # 003784; padding-gauche: 30px; } #cal #top select {font-size: 12px; } #cal #top input {padding: 0; } #cal ul # wk {margin: 0; rembourrage: 0; hauteur: 25px; } #cal ul # wk li {float: gauche; Largeur: 60px; Texte-aligne: Centre; hauteur de ligne: 25px; Style de liste: aucun; } #cal ul # wk li b {Font-Weight: Normal; Couleur: # C60B02; } #cal #cm {Clear: Left; Border-top: 1px solide #ddd; Border-Bottom: 1px en pointillé #DDD; Position: relative; } #cal #cm .cell {position: absolue; Largeur: 42px; hauteur: 36px; Texte-aligne: Centre; marge: 0 0 0 9px; } #cal #cm .cell .so {font: bold 16px arial; } #cal #bm {text-align: droite; hauteur: 24px; hauteur de ligne: 24px; rembourrage: 0 13px 0 0; } #cal #bm a {couleur: 7977ce; } #cal #fd {affichage: aucun; Position: absolue; Border: 1px solide #ddddf; Contexte: #FEFFCD; rembourrage: 10px; hauteur de ligne: 21px; Largeur: 150px; } #cal #fd b {Font-Weight: Normal; Couleur: # 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 <lelect> </ Select> Year <lelect> </ Select> Year <lect> </ Select> Year <lect> </ Select> Year <lect> </ Select> Year <lect> </ Select> Year <lelect> </ Select> Year <SELECT> </ SELECT> Year <lect> </ Select> Year <SELECT> </lect> ye ye AR <lelect> </ select> an <lelect> </ select> an <lelect> </ select> an <lelect> </ select> an <s select> </ select> an </lect> </ select> an <s select> </ select> an <s select> </ select> an </lect> year <lelect> </ select> an </ s. ELECT> ANNÉE <lector> </ SELECT> ANNÉE <lectrious> </ SELECT> ANNÉE <lectring> </ Select> Year <lect> </ Select> Year <lelect> </ Select> Year <lect> </ Select> Year <lect> </ Select> Year <Select> </ Select> Year <lect> </ Select> Year <SELECT> </ Select> Year <SE LECT> </ SELECT> ANNÉE <SECHER> </ SELECT> ANNÉE <SECHER> </ SELECT> ANNÉE <lectring> </ Select> Year <lect> </ Select> Year <Select> </ Select> Year <lect> </ Select> Year <lelect> </ Select> Year </ Select> Year <lelect> </ Select> Year <SELECT> </lect> Année </ Select> Year <lect> </ Select> Year <SELECT> </lect> c ({'fm': 'alop', 'title': this.innerhtml, 'url': this.href, 'p1': al_c (this), 'p2': 1}) "href =" javascript: void (0) "> aujourd'hui dans l'histoire </a> </v> </vascript> </ body> <script linguisse = "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, 0x04ae04 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]; Ding wu ji geng xin ren gui "; var j =" zi chou yin mao Chen si wu wei shen you xu hai "; var o =" rat, bœuf, tigre, lapin, dragon, serpent, cheval, mouton, singe, poulet, chien, cochon "; var l = [" peu de froid "," spring "," spring "," paupière "," jingz "", "spring" "". "Qingming", "Great Rain", "Début de l'été", "Little Man", "Graining Seeds", "Summer Solar", "Little Heat", "Large Heat", "Great Heat", "Bird of Automne", "Dragon Heat", "Frost Dew", "Frost Dew", "Bird of Winter", "Light Snow", "High Snow", "Winter Solstice"]; 63836, 85337, 107014, 128867, 150921, 173149, 195551, 218072, 240693, 263343, 285989, 308563, 331033, 353350, 375494, 397447, 419210, 440795, 462224, 483532, 504758]; "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": "Journée des jeunes", "0601": "Journée internationale des enfants", "0701": "Birthday of the Communist Party of China", "0801": "Day de l'armée", "0910": "China Teachers 'Day", "1225": "Christmas". Festival du printemps "," 0115 ":" Lantern Festival "," 0505 ":" * 1 Dragon Boat Festival "," 0815 ":" * 1 Festival du milieu de l'automne "," 0909 ":" Double Ninth Festival "," 1208 ":" Laba Festival "," 0100 ":" Var h) "}; Fonction U (y) {funder c (j, i) {i) {i) {i) {i) {i)" Nouvelle date (31556925974.7 * (J - 1900) + D [i] * 60000) + Date.Utc (1900, 0, 6, 2, 5)); 1: 0} return (j + b (k))} fonction 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)}} fonction g (h) {return (p [h - 1900] et 15)} fonction e (i, h) {return (p [i - 1900] & (65536 >> h))? 30: 29)} Fonction C (m) {var k, j = 0, h = 0; 0; k == (j + 1) && this.isleap == false) {--k; == 0 && j> 0 && k == J + 1) {if (this.ishep) {this.ispeap = false} else {this.ispeap = true; : H} fonction f (i, j) {var h = i; return j.replace (/ dd? d? d? | mm? m? m? | yy? y? y? y? / g, fonction (k) {switch (k) {cas G (h.getDate (); Break, case 30: "Trente"; this.solardate = f (y, "d"); X.Month; (this.Lunardate == 1) {this.showinLunar = this.LunarmonthinChinese + "Mois"} this.ganzhiyear = a (x.yarcyl); (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") {{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.showinar = "Qingming Festival"; this.reters = 1} 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; } Fonction C (A, B) {A.SetDate (A.GeTDate () + B); G (a.solaryear, a.soLarmonth - 1)) / 7); X.DateArray [E] = NULL; return {init: function (a) {z (a)}, getjson: function () {return x}}}) (); M (top "). GetElementsByTagname (" Span ") [0]; } fonction b (g) {c [g.solaryear - 1901] .Selected = true; x [g.solarmonth - 1] .selected = true} U (nouvelle date (J, 3, 1)); Date ()); A (G); B (G); "Sélectionné"} C.APPEDCHILD (H)} pour (var j = 1; j <13; j ++) {var h = r ("option"); d (g.solaryear, g.solarmonth); g.innerhtml = g.ganzhiyear; = (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] = R ("div"); + 2 + "PX"; Y.style.color = "# 666"; y.innerhtml = c [a] .showinLunar; M ("cm"). APPENDE (x)} var g = r ("div"); g.id = "fd"; m ("cm"). {var b = (([. == "Object") {return e.replace (a, fonction (f, h) {var g = c [h]; return typeof (g) == "Undefined"? "": g})}} return e} function g (b) {var a = q.getjson (). "# {solaryear} # {Solarmonth} Mois # {solardate} # {SolarWeekdayInChinese}"; "<br> # {ganzhiyear} année # {ganzhimonth} Mois # {ganzhidat} jour"; #{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}}}) (); "http://zh.wikipedia.org/zh-cn/" + x.solarmonth + "% e6% 9c% 88" + x.solardate + "% e6% 97% a5"} return {setLink: function (x) {c (x)}}) (); Window.Attachevent ("Onload", fonction () {w.reset (a)})} w.init (a); q.init (a);Ce qui précède concerne cet article, j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.