Saya juga mencobanya dan mendapatkan banyak hal. Setelah menguasai prinsip -prinsip implementasi efek khusus kalender JS, saya ingin menambahkan lebih banyak fungsi dan dapat memainkannya dengan bebas. Izinkan saya membagikannya di sini dulu. Jika Anda tertarik, Anda dapat mencobanya!
Artikel ini berbagi contoh JS untuk mengimplementasikan efek kalender dengan kalender lunar dan informasi lainnya. Volume kode sangat besar untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
Gambar reproduksi:
Kode Implementasi:
<Html> <head> <title> Kalender abadi </itement> <meta content = "Kalender lunar; kalender matahari; kalender bulanan; festival; zona waktu; istilah matahari; delapan karakter; batang dan cabang; zodiak; solar gregorian; lunar Cina; calendar;" name = Kata kunci> <meta content = semua nama = robot> <meta content = "Kalender matahari Gregorian dan kalender lunar Cina" name = description> <meta charset = "utf-8"/> <style type = "text/css"> body {margin: 0px; padding: 0px; } </tyle> </head> <body> <senter> <br> <Table cellpadding = "0" cellPacing = "0" id = "1"> <td> <tyle> #cal {width: 434px; Perbatasan: 1px Solid #C3D9FF; font-size: 12px; margin: 8px 0 0 15px; } #cal #top {height: 29px; Line-Height: 29px; Latar belakang: #e7eef8; Warna: #003784; Padding-left: 30px; } #cal #top pilih {font-size: 12px; } #cal #top input {padding: 0; } #cal ul #wk {margin: 0; Padding: 0; Tinggi: 25px; } #cal ul #wk li {float: left; Lebar: 60px; Teks-Align: tengah; Line-Height: 25px; List-style: tidak ada; } #cal ul #wk li b {font-weight: normal; Warna: #C60B02; } #cal #cm {clear: left; Border-top: 1px solid #ddd; Border-Bottom: 1px bertitik #DDD; Posisi: kerabat; } #cal #cm .cell {position: absolute; Lebar: 42px; Tinggi: 36px; Teks-Align: tengah; Margin: 0 0 0 9px; } #cal #cm .cell .so {font: bold 16px arial; } #cal #bm {text-align: benar; Tinggi: 24px; Line-Height: 24px; Padding: 0 13px 0 0; } #cal #bm a {color: 7977ce; } #cal #fd {display: none; Posisi: Absolute; Perbatasan: 1px solid #ddddf; Latar Belakang: #FeffCD; padding: 10px; Line-Height: 21px; Lebar: 150px; } #cal #fd b {font-weight: normal; Warna: #C60A00; } </style> <!-[jika yaitu]> <tyle> #cal #top {padding-top: 4px;} #cal #top input {width: 65px;} #cal #fd {width: 170px;} </style> <! ID = "TOP"> Agenda <CILTER> </SELECT> Tahun <Tilih> </pilih> tahun <dect> </pilih> tahun <dect> </schect> tahun <dect> </selection> tahun <dect> </selection> tahun <dect> </pilih> tahun <dect> </pilih> tahun <dect> </pilih> tahun <dect> </pilih> ye AR <Colly> </tect> Tahun <dect> </schect> tahun <dect> </schect> tahun <dect> </schect> tahun <dect> </schect> tahun <dect> </selection> tahun <dect> </secor> tahun <dect> </schect> tahun <dect> </pilih> tahun <dect> </select> tahun <dect> </schect </sn Elect> Tahun <Tilih> </pilih> Tahun <dect> </tect> Tahun <dect> </schect> tahun <dect> </schect> tahun <dect> </schect> tahun <dect> </selection> tahun <dect> </pilih> tahun <dect> </pilih> tahun <pilih> </pilih> tahun <pilih> </pilih> tahun <ses Lect> </tect> Tahun <dect> </schect> tahun <dect> </selection> tahun <dect> </tect> tahun <dect> </schect> tahun <dect> </selection> tahun <dect> </selection> tahun <dect> </schect> tahun <dect> </pilih> tahun <dect> </pilih> tahun <dect> </pilih> C ({'fm': 'alop', 'title': this.innerhtml, 'url': this.href, 'p1': al_c (this), 'p2': 1}) "href =" javascript: void (0) "hari ini dalam sejarah </a> </div> </div> </tabel> </td </td </t </t </t - </t tabel> </t tabel> </t tabel> </t tabel> </t tabel> </t tabel> </t tabel> </tl </t/</t tabel> </t tabel> </tlr> </tlry> </t tabel> </tly> </t tabel> </tlu </tl </t tabel> </tly> </t tabel> </tlu> </t a-/</t a-/foid </t tabel> </body> <bahasa skrip = "javaScript"> <!-(function () {var s = navigator.useragent.indexof ("msie")! = -1 &&! window.opera; fungsi m (c) {return document.getElementById (c)} function r (c) {return document.createelement (c)} varbdal8} varBd8 p = 0. 0. 0. 0. 0. 0. 0. 0. 0.} vARBD8 PERUSAH. 0 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, 0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x0a5b6, 0x0a4d0, 0x0d250, 0x0a5b6, 0x0a4d0, 0x0d250, 0x0d21, 0x0a4d0, 0x0d250, 0x0a5b6, 0x0a4d0, 0x0d250, 0x0a5b6, 0x0a4d0, 0x0d250, 0x0A5B6, 0X0A4D0, 0X0D250, 0x0A5B6, 0X0, 0x0D250, 0x0D250, 0x0D250, 0x01 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, 0x1d8a6, 0x0b550, 0x056a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1d8a6 0x0d2b2, 0x0a950, 0x0b557, 0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06a0, 0x0a9a8, 0x0e950, 0x06a0, 0x0a9a8, 0x0e950, 0x06a0, 0x0a8, 0x0e950, 0x06a6 0x04b60, 0x0AAE4, 0x0A570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, 0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x04dd5 0x0b540, 0x0b6a0, 0x195a6, 0x095b0, 0x049b0, 0x0a974, 0x0A4B 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0, 0x0c960, 0x0754, 0x0d4a0, 0x0Da50, 0x0754, 0x0d4a0, 0x0Da50, 0x0754, 0x0d4a0, 0x0Da50, 0x07544 0x025d0, 0x092d0, 0x0cab5, 0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a5b0, 0x15176, 0x052b0, 0x0a5b0, 0x15176, 0x052b0, 0x0a5b0, 0x15176, 0x052b0, 0x0a5b0, 0x15176, 0x052b0, 0x0a5b0, 0x15176, 0x052b0, 0x0a53 0x0Ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, 0x05aa0, 0x076a3, 0x096d0, 0x04bd7, 0x046a3, 0x096d0, 0x04bd7, 0x04.0x04, 0x096d0, 0x04bd7, 0x046A3, 0x096D0, 0x04BD7, 0X046A3, 0X096D0, 0X04BD7, 0X046A3, 0X096D0, 0X04BD7, 0X046 0x0D250, 0x0D520, 0x0DD45, 0x0B5A0, 0x056D0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0a50, 0x1b255, 0x06d20, 0x0a50, 0x1b255, 0x06d20, 0x0a50, 0x1455, 0x06d20, 0x0a5. Ding wu ji geng xin ren gui "; var j =" zi chou yin mao chen si wu wei shen you xu hai "; var o =" tikus, sapi, harimau, kelinci, naga, ular, kuda, domba, monyet, ayam, anjing, "var l = [" sedikit flu "," hebat "," great cold "," segig, "segim, babi"; var l = "cold little", "great cold", "great cold" " "Qingming", "Great Rain", "Beginning of Summer", "Little Man", "Graining Seeds", "Summer Solar", "Little Heat", "Large Heat", "Great Heat", "Bird of Autumn", "Dragon Heat", "Frost Dew", "Frost Dew", "Bird of Winter", "Light Snow", "High Snow", "Winter Solstice"]; var D = [0, 21208, 43467, 63836, 85337, 107014, 128867, 150921, 173149, 195551, 218072, 240693, 263343, 285989, 308563, 331333, 353350, 375494, 397447, 39744, 397447, 39747, 39747, 39747, 39747, 39747, 39747, 39747, 39747, 39747, 3974, 483532, 504758]; "0101": "*1 Hari Tahun Baru", "0214": "Hari Valentine", "0305": "Belajar Dari Hari Peringatan Lei Feng", "0308": "Hari Wanita", "0312": "Hari Labor", "0315": "Hari Hak Konsumen", "0401", "" 0315 ":" 1 Aprabs "," 0315 "," 0315 "," 0315, "0504": "Hari Pemuda", "0601": "Hari Anak Internasional", "0701": "Ulang Tahun Pesta Komunis Tiongkok", "0801": "Hari Angkatan Darat", "0910": "Hari Guru Tiongkok", "121": "3," 124 "," 121 "," 121 "," 121 "," 121 "," 124 "," 124 "," 121 "," 124 "," 124 "," "2 Festival Musim Semi", "0115": "Festival Lentera", "0505": "*1 Festival Perahu Naga", "0815": "*1 Festival Pertengahan Musim Laki H = Tanggal Baru ((3156925974.7 * (J - 1900) + D [i] * 60000) + Tanggal. Fungsi a (h) {return (k.charat (h % 10) + j.charat (h % 12))} fungsi b (h) {if (g (h)) {return (p [h - 1900] & 65536)? 15) Fungsi E (i, h) {return (p [i - 1900] & (65536 >> h))? 30: 29)} Fungsi C (m) {var k, j = 0, h = 0; 2050 N> 0; if (j> 0 && k == (j + 1) && this.isleap == false) {--k this.moncyl ++}} if (n == 0 && j> 0 && k == J + 1) {if (this.isleap) {this.isleap = false} {this.isleap = true; fungsi g (h) {return h <10? "0" + h: h} fungsi f (i, j) {var h = i; L.Substring (L.Length - 4); Kasus: dua puluh "; "Yyyy"); O.Charat (This.lunaryear - 4) % 12); this.lunardateInchinese = z (this.lunarmonth, this.lunardate); A (x.daycyl ++); (this.solarMonth - 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.showinlunar = "qingming festival"; (//*(/d)/.test(This.solarFestival)) {this.restdays = parseInt (regexp. $ 1); this.solarFestival; (//*(/d)/.test(This.lunarfestival)) {this.restdays = (this.restdays> parseInt (regexp. $ 1))? (this.lunarmonth == 12 && this.lunardate == e (this.lunaryear, 12)) {this.lunarfestival = t ["0100"]; (this.showinlunar.length> 4)? 0)) || Tanggal (a.solaryear, a.solarmonth - 1, 1)); ! = 0) {f = c.restdays} if (f> 0) {c.isrest = true} if (d--> 0 || c.solarmonth! = A.solarmonth) {x.DateArray [E] = Null; C.Solardate == B.Solardate) {c.istoday = true} x.dateArray [e] = c; c = new u (c (c.date, 1)); M ("TOP"). GetElementsByTagname ("Select") [0]; M ("Top"). GetElementsByTagname ("Input") [0]; J = Value; Date (); untuk (var j = 1901; j <2050; j ++) {var h = r ("opsi"); H.innerHTML = J; if (j == g) {h.Selected = "dipilih"} x.AppendChild (h)} c.onChange = f; Y.Style return {init: function (g) {e)}, reset: function (g) {b (g)}}}) (var n = () {function c () {var z = q.getjson () (); Z.lines * 38 + 2 + "px"; X.style.background = "c1d9ff"} x.classname = "sel"; 4 | X.onMouseOver = (function) {return function (f) {f.show ({dateIndex: d, cell: this})}}) (a); M ("CM"). AppendChild (g); "{" .replace (b, "// $ 1"), d = "}". Ganti (b, "// $ 1"); typeof (g) == "tidak ditentukan"? " "<br> <b> lunar#{lunarmonthinchinese} bulan#{lunardateInchinese} </b>" c += "<br>#{ganzhiyear} tahun;"; A.Jieqi! = "") {c + = "<br> <b> #{lunarfestival} #{solarfestival} #{jieqi} </b>"} c.innerHtml = y (c, a); + Z.OffsetWidth - 5 + "PX"; M ("BM"). GetElementsByTagname ("A") [0]; C (x)}}}) ();Di atas adalah semua tentang artikel ini, saya harap akan sangat membantu bagi semua orang untuk mempelajari pemrograman JavaScript.