ฉันยังลองและได้รับมาก หลังจากเรียนรู้หลักการดำเนินงานของเอฟเฟกต์พิเศษปฏิทิน JS ฉันต้องการเพิ่มฟังก์ชั่นเพิ่มเติมและสามารถเล่นได้อย่างอิสระ ให้ฉันแบ่งปันที่นี่ก่อน หากคุณสนใจคุณสามารถลองได้!
บทความนี้แบ่งปันตัวอย่างของ JS เพื่อใช้เอฟเฟกต์ปฏิทินกับปฏิทินจันทรคติและข้อมูลอื่น ๆ ปริมาณรหัสมีขนาดใหญ่มากสำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
ภาพการทำซ้ำ:
รหัสการใช้งาน:
<html> <head> <title> ปฏิทิน Perpetual </title> <meta content = "ปฏิทินจันทรคติ; ปฏิทินพลังงานแสงอาทิตย์; ปฏิทินรายเดือน; เทศกาล; เขตเวลา; คำศัพท์แสงอาทิตย์; แปดตัวอักษรลำต้นและสาขา; Zodiac; Gregorian Solar; name = keywords> <meta content = all name = robots> <meta content = "Gregorian Solar Calendar และ Lunar Calendar ของจีน" ชื่อ = คำอธิบาย> <meta charset = "utf-8"/> <style type = "text/css"> ร่างกาย {margin: 0px; Padding: 0px; } </style> </head> <body> <center> <br> <table cellpadding = "0" cellpacing = "0" id = "1"> <tr> <td> <style> #cal {width: 434px; ชายแดน: 1px Solid #C3D9FF; ขนาดตัวอักษร: 12px; มาร์จิ้น: 8px 0 0 15px; } #cal #top {ความสูง: 29px; ความสูงของสาย: 29px; ความเป็นมา: #e7eef8; สี: #003784; Padding-Left: 30px; } #cal #top เลือก {font-size: 12px; } #cal #top อินพุต {padding: 0; } #cal ul #wk {margin: 0; Padding: 0; ความสูง: 25px; } #cal ul #wk li {float: ซ้าย; ความกว้าง: 60px; TEXT-ALIGN: CENTER; ความสูงของสาย: 25px; รายการสไตล์: ไม่มี; } #cal ul #wk li b {font-weight: ปกติ; สี: #C60B02; } #cal #cm {Clear: left; ชายแดนด้านบน: 1px Solid #DDD; ขอบด้านล่าง: 1px Dotted #DDD; ตำแหน่ง: ญาติ; } #CAL #CM .CELL {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 42px; ความสูง: 36px; TEXT-ALIGN: CENTER; มาร์จิ้น: 0 0 0 9px; } #CAL #CM .CELL .SO {FONT: BOLD 16PX Arial; } #CAL #BM {TEXT-ALIGING: RIGHT; ความสูง: 24px; ความสูงของสาย: 24px; Padding: 0 13px 0 0; } #cal #bm a {color: 7977ce; } #cal #fd {display: none; ตำแหน่ง: สัมบูรณ์; ชายแดน: 1px Solid #DDDDF; ความเป็นมา: #feffcd; Padding: 10px; ความสูงของสาย: 21px; ความกว้าง: 150px; } #cal #fd b {font-weight: ปกติ; สี: #C60A00; } </style> <!-[ถ้าเช่น]> <style> #cal #top {padding-top: 4px;} #cal #top อินพุต {width: 65px;} #cal #fd {width: 170px;} </style> <! id = "top"> วาระการประชุม <elect> </select> ปี <elect> </select> ปี <elect> </เลือก> ปี <elect> </select> ปี <elect> </select> ปี <elect> </select> ปี <elect> </select> ปี ar <elect> </elect> ปี <elect> </เลือก> ปี <elect> </เลือก> ปี <elect> </เลือก> ปี <elect> </เลือก> ปี <elect> </เลือก> ปี <elect> </elect> ปี <elect> </select> ปี เลือก> ปี <elect> </เลือก> ปี <elect> </เลือก> ปี <elect> </เลือก> ปี <elect> </เลือก> ปี <elect> </เลือก> ปี <elect> </เลือก> ปี <elect> </เลือก> ปี <elect> </select> ปี <elect> LECT> </SELECT> ปี <elect> </เลือก> ปี <elect> </เลือก> ปี <elect> </เลือก> ปี <elect> </เลือก> ปี <elect> </เลือก> ปี <elect> </เลือก> ปี <elect> </select> ปี <elect> </elect> c ({'fm': 'alop', 'title': this.innerhtml, 'url': this.href, 'p1': al_c (นี่), 'p2': 1}) "href =" Javascript: void (0) "> วันนี้ในประวัติศาสตร์ </a> </body> <script language = "javascript"> <!-(function () {var s = navigator.useragent.indexof ("msie")! = -1 &&! window.opera; ฟังก์ชั่น m (c) {return document.getElementID 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09Ad0, 0x055d2, 0x04ae0, 0x0a5b6, 0x0a4d0 0x0a2, 0x095b0, 0x14977, 0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, 0x0d4a0, 0x1d8a6, 0x0b550 0x0d2b2, 0x0a950, 0x0b557, 0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0ec0e950 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, 0x096d0, 0x04dd5 0x0b540, 0x0b6a0, 0x195a6, 0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0af46 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0, 0x0c960, 0x0d954, 0x0d4a0, 0x0da50 0x025d0, 0x092d0, 0x0cab5, 0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, 0x05a0, 0x076a3, 0x096d0, 0x04bd7 0x0d250, 0x0d520, 0x0dd45, 0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20 ding wu ji geng xin ren gui "; var j =" zi chou yin mao chen si wu wei shen you xu hai "; var o =" หนู, วัว, เสือ, กระต่าย, มังกร, งู, ม้า " Equinox "," Qingming "," Great Rain "," จุดเริ่มต้นของฤดูร้อน "," Man Little Man "," Graining Seeds "," Summer Solar "," Little Heat "," ความร้อนขนาดใหญ่ "," Great Heat "," Bird of Autumn "," Dragon Heat "," Frost Dew "," Frost Dew " 43467, 63836, 85337, 107014, 128867, 150921, 173149, 195551, 218072, 240693, 263343, 285989, 308563, 331033 462224, 483532, 504758]; v = {"0101": "*1 วันปีใหม่", "0214": "วันวาเลนไทน์", "0305": "เรียนรู้จากวันแห่งความทรงจำของลีเฟิง", "0308": "วันผู้หญิง", "0312": "วันที่" "0504": "วันเยาวชน", "0601": "วันเด็กนานาชาติ", "0701": "วันเกิดของพรรคคอมมิวนิสต์จีน", "0801": "วันกองทัพ", "0910": เทศกาลฤดูใบไม้ผลิ "," 0115 ":" เทศกาลแลนเทิร์น "," 0505 ":"*1 เทศกาลเรือมังกร "," 0815 ":"*1 เทศกาลกลางฤดูใบไม้ร่วง "," 0909 ":" เทศกาลที่เก้า "," 1208 ": วันที่ (31556925974.7 * (j - 1900) + d [i] * 60000) + วันที่ utc (1900, 0, 6, 2, 5); 1: 0} return (j + b (k))} ฟังก์ชั่น a (h) {return (k.charat (h % 10) + j.charat (h % 12))} ฟังก์ชั่น b (h) {ถ้า (g (h)) {return (p [h - 1900] & 65536)? 30: 29) } ฟังก์ชั่น e (i, h) {return (p [i - 1900] & (65536 >> h))? && n> 0; > 0 && k == (j + 1) && this.isleap == false) { -k; this.isleap = true; } if (n == 0 && j> 0 && k == j + 1) {if (this.islap) {this.islap = false} anle {this.isleap "0" + h: h} ฟังก์ชั่น f (i, j) {var h = i; G (h.getdate ()); BREAK; this.solardate = f (y, "d"); this.lunarmonth = x.month; this.lunardate); = 0; ถ้า (c (this.solaryear, (this.solarmonth - 1) * 2) == f (y, "d")) {this.showinlunar = this.jieqi = l [(this.solarmonth - 1) * 2] this.showinlunar = this.jieqi = l [(this.solarmonth - 1) * 2 + 1]} ถ้า (c (this.solaryear, (this.solarmonth - 1) * 2 + 1]} ถ้า (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)]; หาก (typeof this.lunarfestival == "undefined") {this.lunarfestival = ""} {ถ้า (//*(/d)/.test(this.lunarfestival)) ParseInt (regexp. $ 1); this.lunarfestival = this.lunarfestival.replace (//*/d/, "")}} ถ้า (this.lunarmonth == 12 && this.lunardate == e (this.lunaryear, 12) this.ShowInlunar = (this.lunarfestival == "")? X.Lines = 0; } ฟังก์ชั่น 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"). getElementsByTagname ("span") [0]; B (G) {C [G.Solaryear - 1901]. วันที่ (j, 3, 1)); A (G); } C.AppendChild (H)} สำหรับ (var j = 1; j <13; j ++) {var h = r ("ตัวเลือก"); D (G.Solaryear, G.Solarmonth); n = (ฟังก์ชั่น () {ฟังก์ชั่น c () {var z = q.getjson (); var c = z.datearray; m ("cm"). style.height = z.lines * 38 + 2 + "px"; m ("cm"). innerhtml = "" สำหรับ (var a = 0; x = r ("div"); 38 + 2 "px"; y.style.color = "#666"; m ("cm"). ภาคผนวก (x)} var g = r ("div"); g.id = "fd"; {var b = /( [[+?^=!:$ {}()| [เหมือน ////ife)/g, z = "{". replace (b, "// $ 1"), d = "}" แทนที่ (b, "// $ 1"); == "Object") {return e.replace (a, function (f, h) {var g = c [h]; return typeof (g) == "undefined" "#{Solaryear} ปี#{Solarmonth} เดือน#{Solardate} วัน#{Solarweekdayinchinese}"; "<br>#{ganzhiyear} ปี#{ganzhimonth} เดือน#{ganzhidate} วัน"; #{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 = "ไม่มี"} 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" window.attachevent ("onload", function () {w.reset (a)})} w.init (a);ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript