나는 또한 그것을 시도하고 많이 얻었습니다. JS 캘린더 특수 효과의 구현 원리를 마스터 한 후 더 많은 기능을 추가하고 자유롭게 재생할 수 있습니다. 먼저 여기에서 공유하겠습니다. 관심이 있으시면 시도해 볼 수 있습니다!
이 기사는 Lunar 달력 및 기타 정보로 달력 효과를 구현하기위한 JS의 예를 공유합니다. 코드 볼륨은 참조를 위해 매우 큽니다. 특정 내용은 다음과 같습니다
생식 이미지 :
구현 코드 :
<html> <head> <title> 영구 달력 </title> <meta content = "Lunar 캘린더; 태양 달력; 월 달력; 축제; 시간대; 태양열; 8 개의 문자; 줄기와 가지; 그레고리안 태양; 중국어 달력;" name = keywords> <meta content = all name = robots> <meta content = "Gregorian Solar 달력 및 중국어 달력"name = description> <meta charset = "utf-8"/> <style type = "text/css"> body {margin : 0px; 패딩 : 0px; . 국경 : 1px 고체 #c3d9ff; 글꼴 크기 : 12px; 여백 : 8px 0 15px; } #cal #top {높이 : 29px; 라인 높이 : 29px; 배경 : #e7eef8; 색상 : #003784; 왼쪽 패딩 : 30px; } #cal #top select {font-size : 12px; } #cal #top input {패딩 : 0; } #cal ul #wk {마진 : 0; 패딩 : 0; 높이 : 25px; } #cal ul #wk li {float : 왼쪽; 너비 : 60px; 텍스트 정렬 : 센터; 라인 높이 : 25px; 목록 스타일 : 없음; } #cal ul #wk li b {font-weight : normal; 색상 : #C60B02; } #cal #cm {clear : 왼쪽; 테두리 : 1px Solid #ddd; 국경-바닥 : 1px 점선 #ddd; 위치 : 상대; } #cal #cm .Cell {위치 : 절대; 너비 : 42px; 높이 : 36px; 텍스트 정렬 : 센터; 여백 : 0 0 9px; } #cal #cm .cell .so {font : bold 16px arial; } #cal #BM {텍스트-알림 : 오른쪽; 높이 : 24px; 라인 높이 : 24px; 패딩 : 0 13px 0 0; } #cal #bm a {색상 : 7977ce; } #cal #fd {디스플레이 : 없음; 위치 : 절대; 국경 : 1px Solid #DDDDF; 배경 : #feffcd; 패딩 : 10px; 라인 높이 : 21px; 너비 : 150px; } #cal #fd b {font-weight : normal; 색상 : #C60A00; } </style> <!-[If]> <style> #cal #top {padding-top : 4px;} #cal #top input {width : 65px;} #cal #fd {width : 170px;} </style> <! [endif] --> "cal"> <div id = "top"> genda <select> </select> year </select> </select> elect> </select> elect> </select> year </select> </select> year <select> </select> elect> </select> year </select> year <select> </select> </select> ye ar <select> </select> elear <select> </select> year </select> </select> elect <select> </select> elect> </select> year </select> </select> year <select> </select> elect> </select> year </select> year <select> </select> <select> </s ELECT> year <select> </select> year <select> </select> year <select> </select> elect> </select> </select> elect> </select> year <select> </select> <select> </select> 년 </select> year </select> </select> <select> </select> year <se lect> </select> year <select> </select> year </select> </select> year <select> </select> year </select> elect> </select> year <select> </select> </select> select <select> </select> 년 </select> year <select> </select> C ({ 'fm': 'alop', 'title': this.innerhtml, 'url': this.href, 'p1': al_c (this), 'p2': 1}) "href ="javaScript : void (0) "> 오늘 역사 </a> </div> </td> </td> </td> </td> </td> </td> </td> </td> </body> <script language = "javaScript"> <!-(function () {var s = navigator.useragent.indexof ( "msie")! = -1 &&! swooind.opera; function m (c) {return.getElementById (c)} function r (c) {return document.createelement (c)} [0x04bd8, 0. 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, 0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0d255. 0x0A2, 0x095B0, 0x14977, 0x04970, 0x0A4B0, 0x0B4B5, 0x06A50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, 0x06566, 0x066, 0x04970 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, 0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x02d0, 0x02d0. 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, 0x0d55, 0x0d4d4. 0x0b540, 0x0b6a0, 0x195a6, 0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, 0x04af5, 0x09570 0x064B0, 0x074A3, 0x0EA50, 0x06B58, 0x055C0, 0x0AB60, 0x096D5, 0x092E0, 0x0C960, 0x0D954, 0x0D4A0, 0x0DA50, 0x07552, 0x056A0, 0x07552. 0x025d0, 0x092d0, 0x0cab5, 0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, 0x07954, 0x06aa0, 0x06aa930. 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, 0x05aa0, 0x076a3, 0x096d0, 0x04bd7, 0x04ad0, 0x0a4d0, 0x0a4d0, 0x04ad0. 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 wui shen you xu hai "; var o ="쥐, 황소, 호랑이, 토끼, 뱀, 말, 양, 닭고기, 개, 돼지 ","스프링 스프링 ","봄에 ",", ",", ",", "," " "Qingming", "Great Rain", "Summer", "Little Man", "Graining Seeds", "Summer Solar", "Little Heat", "Great Heat", "Bird of Autumn", "Dragon Heat", "Frost Dew", "Frost Dew", "Light Snow", "High Snow", "0, 21208,"[0, "; 63836, 85337, 107014, 128867, 150921, 173149, 195551, 218072, 240693, 263343, 285989, 308563, 331033, 353350, 375494, 397447, 419210, 440795, 44074447, 483532, 504758; "0101": "*1 New Year 's Day", "0214": "Valentine's Day", "0305": "Lei Feng의 현충일을 배우십시오", "0308": "여성의 날", "0312": "Arbor Day": "0315": "소비자 권리의 날", "0401": "0501" "," "" "", "" "" ","0401 ". "0504": "청소년의 날", "0601": "국제 어린이의 날", "0701": "중국 공산당의 생일", "0801": "육군의 날", "0910": "1001": "*3 전국의 날", "1224": "크리스마스 이브": "var t ="}; "*2 Spring Festival": "0115": "0505": "*1 Dragon Boat Festival", "0815": "*1 Mid-Autumn Festival", "0909": "Double Ninth Festival", "1208": "LABA FESTIVAL", "0100": "새해 EVE"; 날짜 (31556925974.7 * (J -1900) + d [i] * 60000) utc (1900, 0, 6, 2, 5); : 0} return (j + b (k))} 함수 a (h) {return (k.charat (h % 10) + j.charat (h % 12))} 함수 b (h) {if (g (h)) {return ((p [h -1900] & 65536)? 30 : 29)} else (h) {h) {p [h -15)} 기능 E (I, H) (P [I -1900] 및 > K ++; && k == (j + 1) && this.isleap == false) { -k; is.yeap; } (n == 0 && k == j + 1) {if (this.isleap = false} {this.isleap = true; h <10? "0" + h : h} 함수 f (i, j) {var h = i; "dd": return h.getdate () "Twenty"; "M"; Solardate = F (y, "y.getday (); 이 z (this.lunartate) (this.lunardate == 1) {this.ganzhiyear = a (x.yearcyl); this.jieqi = "; this.restdays = 0; == 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.restdays = 1} this.solarfestival = v [f (y, "mm") + f (y, "dd"); if this.solarfestival == "undefined") {this.solarfestival = "} else {if (//*(/d)/.solarfestival)))))))))))))))) {this.rst. parseint (regexp. $ 1); Showinlunar = (this.solarfestival == "). g (this.lunarmonth) + g (this.lunardate); 이 } showinlunar = (this.lunarfestival == ")? x.lines = 0; x.datearray = new Array (42) {return ((A % 4 == 0)) || (a % 400 == 0)}} function g (a, b). 31] [a, b) {a g (a.solaryear, a.solarmonth-1)) / 7); x.datearray [e] = new var (c.solaryear && c.solarmonth && c.solardate) {c.istoday = true} x.datearray; return {init : function (a) {z (a)}, getjson : function () {return x}}}) () {var c = m ( "top"). M ( "span") [0] g.shengxiao} {g.solaryear -1901]. {새로운 날짜 (J, 3, 1); a (g); = "AppendChild (h)} (var j <13; j ++) {h.value = j; D (G.Solaryear, G.Solarmonth); G.Ganzhiyear; = (function () {function c () {var z = q.getJson (); var c = z.datearray; m ( "cm"). height = Z.Lines * 38 + 2 + "px"; x = r (c [a] .istoday) {x.style.border = x.style.background = " #c1d9ff"} "px"; "div"; = "#666"; M ( "cm". var g = r ( "cm"); {var b = /(.**+?^= !:$ {{} () verst (in), Z = ".".replace (b, "// $ 1"). 대체 (b, "// $ 1"); = "Object") {return E.Replace (f, h) {var g = c [h]; return typeof (g) == ": g})} return e} {var a = q.getjson () "#{solaryear} year#{Solarmonth} Month#{Solardate} day#{solarweekdayinchinese}"; "<br>#{ganzhiyear} 년#{ganzhimonth} month#{ganzhidate} day"; if (a.solarfestival! = ""|| a.lunarfestival! #{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 "; "none"} return {show : function (z) {g (z)}, hide : function () {x ()}, init : function (z) {c = z}}}) (function () {var g = m ( "bm"). "http://zh.wikipedia.org/zh-cn/" + x.solarmonth + "%e6%9c%88" + x.solardate + "%e6%97%a5"{setlink : function (x) {c (x)}}) (); wind위의 내용은이 기사에 관한 모든 것입니다. 모든 사람들이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.