Bagaimana Membangun Kalendar Advent Mudah dalam JavaScript
Advent adalah tempoh menunggu dan bersiap untuk Krismas yang bermula empat hari Ahad sebelum malam Krismas. Pengalihan masa Advent secara tradisional diukur dengan bantuan sama ada Kalendar Advent atau Wreath Advent. Walaupun permulaan Advent bukan tarikh tetap, Advent Calendar biasanya bermula pada 1 Disember.
Berdasarkan kastam tempatan, Advent Calendar boleh mempunyai reka bentuk yang berbeza, tetapi paling sering mereka mengambil bentuk kad segi empat besar dengan 24 tingkap atau pintu menandakan hari-hari antara 1 dan 24 Dis. Pintu menyembunyikan mesej, puisi, doa atau kejutan kecil.
Dalam jawatan ini saya akan menunjukkan kepada anda cara untuk membuat Kalendar Advent dalam JavaScript berorientasikan objek. Seperti yang dibuat dalam JavaScript vanila, anda boleh dengan mudah meletakkan kod itu ke dalam laman web anda sendiri.
- Demo
- Muat turun Sumber
Reka Bentuk Kalendar JavaScript
Kalendar Advent kami akan mempunyai 24 pintu pada imej latar belakang bertemakan Krismas. Setiap pintu akan menyembunyikan petikan yang berkaitan dengan Krismas yang akan muncul dalam bentuk mesej amaran apabila pengguna mengklik pada pintu. Pintu-pintu tetap tertutup sehingga hari yang diberikan, kerana ia berlaku dengan kehidupan sebenar Kalendar Advent; pintu tidak boleh dibuka sebelum hari yang tepat.
Pintu yang telah didayakan akan mempunyai warna sempadan dan latar belakang yang berlainan (putih) daripada orang kurang upaya (lightgreen). Kami akan menggunakan HTML5, CSS3, dan JavaScript untuk menyediakan Kalendar Advent kami yang kelihatan seperti ini:
Langkah 1 - Buat Struktur & Sumber Fail
Pertama sekali, kita perlu memilih imej latar belakang yang bagus. Saya memilih satu dengan orientasi potret dari Pixabay, jadi kalendar saya akan mengandungi 4 tiang dan 6 baris.
Baiklah jika anda lebih suka orientasi landskap. Hanya ubah posisi pintu dalam kod JavaScript, seperti yang anda ada 6 tiang dan 4 baris. Jika anda mempunyai imej anda, buat folder dipanggil / imej, dan simpannya.
Ini akan menjadi satu-satunya sumber imej kami untuk projek ini.
Untuk fail JavaScript buat a / skrip folder di dalam folder root anda. Letakkan dua fail teks kosong ke dalamnya, dan namakannya calendar.js dan messages.js. Calendar.js akan memegang fungsi, sementara messages.js akan mengandungi pelbagai mesej yang muncul ketika pengguna “dibuka” (klik pada) pintu.
Kami juga memerlukan HTML dan fail CSS, jadi buat dua fail kosong di dalam folder root anda dan beri nama mereka index.html dan style.css.
Apabila anda siap, anda mempunyai sumber dan struktur fail yang anda perlukan untuk menyelesaikan projek ini, dan folder root anda kelihatan seperti ini:
Langkah 2 - Buat HTML
Kod HTML yang kami gunakan agak mudah. Lembaran gaya CSS dihubungkan dalam
seksyen, sementara dua fail JavaScript dimasukkan ke dalam bahagian bawah seksyen. Yang terakhir adalah perlu, kerana jika kita meletakkan skrip ke dalam seksyen, kod itu tidak akan dilaksanakan, kerana itu menggunakan elemen halaman HTML yang dimuatkan.Kalendar Advent sendiri diletakkan di dalam Elemen HTML, dan bukan sebagai sifat latar belakang CSS, kerana cara ini kita dapat dengan mudah mengaksesnya sebagai elemen DOM.
Di bawah imej yang kami letakkan senarai kosong tanpa had dengan “adventDoors” pemilih id yang akan dihuni oleh skrip. Jika pengguna tidak mendayakan JavaScript dalam penyemak imbas mereka, mereka akan melihat imej Krismas yang mudah.
Kalendar Advent Kalendar Advent
Langkah 3 - Hampir “Mesej” Array
Kami perlukan 24 petikan Krismas untuk mengisi “mesej” array. Saya memilih saya daripada GoodReads.
Buka skrip / messages.js fail; kami akan meletakkan sebut harga di sini untuk memastikan mereka terpisah dari fungsi. The mesej array adalah array di dalam array, setiap elemen array luar mengandungi array lain dengan dua elemen: petikan, dan pengarangnya.
Populasi array dengan petikan kegemaran anda mengikut sintaks yang berikut:
var messages = [["Quote 1", "Pengarang 1"], ["Quote 2", "Pengarang 2"], ... ["Quote 24", "Pengarang 24"]];
Langkah 4 - Tambah Gaya CSS Asas untuk Pintu
Untuk mencipta gaya CSS yang diperlukan untuk pintu kita perlu membayangkan reka bentuk akhir, kerana pintu sendiri akan dibuat dengan JavaScript dalam langkah-langkah berikut.
Kita perlu membuat 4 tiang dan 6 baris segi empat tepat dalam penjajaran yang tepat. Untuk ini, kami akan menggunakan kedudukan: saudara dan juga kedudukan: mutlak Peraturan CSS. Oleh kerana kedudukan yang tepat akan berubah dari pintu ke pintu, kami akan menambah atas, bawah, ditinggalkan, dan betul sifat dalam JavaScript, dalam CSS kita hanya perlu menambah kedudukan relatif ke dalam bekas (senarai tanpa urutan dalam HTML), dan kedudukan mutlak untuk elemen senarai (mereka akan ditambahkan di JS juga).
Perkara penting lain dalam fail stylesheet adalah untuk buat reka bentuk yang berbeza untuk orang kurang upaya dan keadaan yang diaktifkan. The .kurang upaya pemilih akan ditambahkan kepada orang kurang upaya oleh JavaScript.
Untuk Kalendar saya, saya menetapkan sempadan putih pepejal dan fon putih untuk pintu yang dibolehkan dengan latar belakang putih yang telus pada melayang; dan sempadan cahaya terang, dan fon, dan latar cahaya terang telus bagi orang yang kurang upaya. Jika anda tidak suka reka bentuk ini, anda boleh menukar warna dan gaya mengikut keinginan anda.
Letakkan kod berikut (atau peraturan gaya diubahsuai anda) ke dalam anda style.css fail.
ul # adventDoors position: relative; gaya senarai: tiada; padding: 0; margin: 0; #adventDoors li position: absolute; #adventDoors li a color: #fff; lebar: 100%; ketinggian: 100%; saiz fon: 24px; teks-align: center; paparan: flex; arah lenturan: lajur; justify-content: center; teks-hiasan: tiada; sempadan: 1px #fff pepejal; #adventDoors li a: not (. disabled): hover color: #fff; warna latar belakang: telus; warna latar belakang: rgba (255,255,255,0.15); #adventDoors li a.disabled border color: # b6fe98; warna latar belakang: rgba (196,254,171,0.15); warna: # b6fe98; kursor: lalai;
Langkah 5 - Buat Pembolehubah Global
Dari langkah ini, kami hanya akan bekerjasama dengan skrip / calendar.js fail, jadi sekarang mari buka ini. Kalendar Advent kami akan menggunakan dua pemboleh ubah global.
The myCal pembolehubah memegang imej Kalendar sebagai objek JS. Imej telah ditambah ke index.html fail dalam Langkah 2. Kami akan meletakkan pintu ke imej ini di Langkah 7. Kami menangkap HTML berkaitan elemen yang ditandakan dengan “adventCal” pengenal dengan menggunakan kaedah getElementById () DOM. The myCal pembolehubah akan menjadi objek DOM HTMLImageElement.
The tarikh semasa pembolehubah memegang tarikh semasa supaya skrip kami dengan mudah boleh menentukan sama ada pintu harus diaktifkan atau dilumpuhkan. Untuk mencipta tarikh semasa kami menamakan objek baru kelas JavaScript Tarikh.
Masukkan coretan kod berikut ke bahagian atas anda calendar.js fail.
var myCal = document.getElementById ("adventCal"); var currentDate = new Date (); Langkah 6 - Buat “Pintu” Kelas
Seperti yang kita perlukan 24 pintu, cara paling mudah untuk melakukan ini adalah untuk mencipta “Pintu” kelas, dan kemudian instantiate ia 24 kali.
Kelas Pintu kami mempunyai dua parameter, kalendar dan hari. Untuk kalendar parameter yang kita perlu lulus imej Krismas yang akan berfungsi sebagai latar belakang. Untuk hari parameter kita perlu lulus hari semasa Disember dalam bentuk integer.
Kami akan lulus nilai sebenar parameter dalam langkah terakhir (Langkah 8), semasa penyampaian 24 objek Pintu.
Kami akan membuat 5 sifat dan 1 kaedah untuk kelas Door. Dalam Langkah ini kita hanya akan melewati 5 sifat tersebut, dan saya akan menerangkannya kandungan() kaedah dalam Langkah seterusnya.
The “lebar” & “ketinggian” hartanah
The lebar dan ketinggian Ciri-ciri dinamik mengira lebar dan ketinggian setiap pintu individu (yang berubah mengikut lebar dan ketinggian imej latar belakang).
Multipliers 0.1 dan 0.95 berada dalam persamaan untuk meninggalkan ruang untuk margin, antara setiap pintu, dan sekitar sisi Kalendar, juga.
The “adventMessage” harta
The adventMessage harta memegang kandungan mesej amaran, iaitu petikan dan pencocokan penulis yang kami messages.js memegang fail. The adventMessage harta mengambil petikan dan pengarang dari mesej [] pelbagai, bergantung pada tarikh semasa.
Untuk 1 Dis adventMessage harta mengambil elemen pertama dari array luar yang mesej [0], sebagai tatasusunan adalah berasaskan sifar dalam JavaScript.
Atas sebab yang sama, petikan untuk 1 Dis diletakkan sebagai mesej [0] [0] (elemen pertama susunan dalaman), dan pencipta yang sepadan dapat dicapai sebagai mesej [0] [1] (unsur kedua dalam batin).
The “x”&”y” hartanah
Hartanah x dan y memegang jawatan yang betul setiap pintu yang akan kita gunakan dalam langkah seterusnya untuk menetapkan atas dan ditinggalkan Sifat CSS. Ini akan melengkapkan kedudukan: saudara dan kedudukan: mutlak Peraturan CSS yang kami tetapkan di Langkah 4 untuk bekas pintu (ul # adventDoors), dan pintu sendiri (#adventDoors li). Pengiraan mungkin agak menakutkan, tetapi mari kita pergi dengan cepat melalui mereka.
The x harta akan digunakan oleh ditinggalkan Hartanah kedudukan CSS di Langkah seterusnya (Langkah 7). Ia menentukan dalam piksel di mana Pintu individu perlu diletakkan pada paksi-x.
Ia mengambil lebar imej latar belakang, dan ia meninggalkan sedikit margin untuknya (4%). Kemudian dengan bantuan operator selebihnya, ia menilai di mana ruangan itu akan diletakkan (ingat, akan ada 4 tiang), dan akhirnya ia menambah sedikit (10%) margin kepada setiap Pintu individu dengan menggunakan 1.1 pengganda.
Dengan cara yang sama, y harta akan digunakan oleh atas Ciri-ciri kedudukan CSS, dan juga ia menentukan dalam pixel di mana Pintu individu perlu diletakkan pada paksi y.
Kami mengambil ketinggian imej latar belakang dengan bantuan ketinggian harta yang diluluskan kalendar parameter (yang memegang objek DOM), dan biarkan margin 4% mengelilingi sisi menegak Kalendar.
Kemudian, dengan bantuan kaedah Math.floor () kami menghitung di mana baris objek Pintu yang diberikan akan (akan ada 6 baris).
Akhirnya kami menambah margin 10% untuk setiap objek Pintu dengan mengalikan ketinggiannya dengan menggunakan multiplier sebanyak 1.1.
fungsi Pintu (kalendar, hari) this.width = ((calendar.width - 0.1 * calendar.width) / 4) * 0.95; this.height = ((calendar.height - 0.1 * calendar.height) / 6) * 0.95; this.adventMessage = 'Hari' + hari + 'Advent \ n' + '"' + mesej [hari - 1] [0] + '" \ n \ n \ t' + ' - 1] [1] + '\ n \ n'; this.x = (0.04 * calendar.width + ((day - 1)% 4) * (1.1 * this.width)); this.y = - (0.96 * calendar.height - Math.floor ((day - 1) / 4) * (1.1 * this.height)); this.content = function () ...;
Langkah 7 - Hampir “Kandungan()” Kaedah
Ia adalah kandungan() kaedah yang akan memaparkan pintu kami dalam penyemak imbas. Pertama sekali, kami membuat nod DOM baru dengan bantuan pembolehubah nod yang akan mencipta
Oleh kerana kelas Door akan diterapkan 24 kali dalam gelung untuk Langkah seterusnya (Langkah 8), ini bermakna bahawa kita akan mempunyai 24
Properties node.id di baris seterusnya menambah pemilih id yang unik untuk setiap elemen senarai (pintu). Kami akan memerlukan ini untuk dapat melengkung dengan betul melalui hari-hari dalam langkah seterusnya (Langkah 8). Dengan cara ini, Door 1 akan mempunyai id =”pintu1 ", Pintu 2 akan mempunyai id =”pintu2 " pemilih, dan sebagainya.
Ciri node.style.cssText di baris seterusnya menambah beberapa peraturan CSS untuk setiap elemen senarai (pintu) dengan bantuan gaya =”... ” Atribut HTML yang digunakan untuk memasukkan CSS dalam baris dalam fail HTML. The node.style.cssText harta menggunakan sifat-sifat kelas Door yang kami tetapkan pada langkah sebelumnya (Langkah 6).
Untuk menjadikan objek Pintu kami dapat diklik, kami juga perlu menambah tag dalam elemen senarai. Kami mencapai ini dengan bantuan innerNode pembolehubah yang kita bindah sebagai elemen kanak-kanak ke elemen senarai yang sesuai yang dikenalpasti oleh id =”pintu [i]” pemilih (dengan [i] menjadi nombor hari), dengan menggunakan kaedah appendChild () DOM seperti sebelum ini.
Hartanah innerHTML di baris seterusnya memaparkan hari semasa (1-24) di atas pintu di pelayar, dan kami juga menambah href =”#” atribut ke tag anchor kami dengan cara href href.
Akhir sekali, dalam kenyataan if-else, kami menilai sama ada objek Pintu perlu diaktifkan atau dilumpuhkan. Pertama, kita periksa jika kita berada pada bulan ke-12 tahun (Disember) dengan menggunakan kaedah getMonth () objek Tarikh. Kita perlu menambah 1, kerana getMonth () adalah berasaskan sifar (Januari ialah bulan 0, dan sebagainya).
Selepas ini, kami periksa sama ada tarikh semasa diadakan di tarikh semasa pembolehubah global yang kami tetapkan di Langkah 5 adalah kurang daripada hari bahawa objek Pintu semasa mewakili.
Jika tidak Disember, atau hari yang diwakili oleh Pintu yang diberikan adalah lebih besar daripada tarikh semasa, Pintu hendaklah dilumpuhkan, dalam mana-mana kes lain perlu dibolehkan supaya pengguna boleh mengkliknya, dan melihat mesej Advent yang berkaitan.
Sekiranya Pintu dilumpuhkan, kami menambah kelas =”kurang upaya” pemilih ke tag anchor yang diberikan dengan bantuan harta kelasName. Ingat, kami telah menggayakannya .kurang upaya kelas dengan CSS di Langkah 4. Kami juga perlu menetapkan sifat atribut atribut HTML untuk kembali palsu.
Sekiranya Pintu dalam keadaan didayakan, kami menambah adventMessage harta kepada mesej amaran, dan letakkannya di dalam atribut atribut atribut HTML.
this.content = function () var node = document.createElement ("li"); document.getElementById ("adventDoors"). appendChild (node); node.id = "pintu" + hari; node.style.cssText = "width:" + this.width + "px; height:" + this.height + "px; top:" + this.y + "px; left:" + this.x + "px ; "; var innerNode = document.createElement ("a"); document.getElementById ("pintu" + hari) .appendChild (innerNode); innerNode.innerHTML = day; innerNode.href = "#"; jika ((currentDate.getMonth () + 1) < 12 || currentDate.getDate() < day ) innerNode.className = "disabled"; innerNode.onclick = function() return false; else var adventMessage = this.adventMessage; innerNode.onclick = function() alert(adventMessage); return false; ; Langkah 8 - Mulakan semula “Pintu” Objek
Akhirnya, kita perlu memulakan kelas Door 24 kali.
Untuk berbuat demikian, kami menggunakan Ekspresi Fungsi Segera yang Terlibat yang sangat berguna di sini, kerana kami tidak memerlukan pemboleh ubah kerana kami hanya mahu melaksanakan kod di dalam fungsi sekali.
Kami mencipta pintu [] pelbagai yang akan memegang objek 24 Pintu. Kami melelong sepanjang hari dari 1 hingga 24 (mereka akan menjadi elemen 0-23 ke atas [] array, kerana array adalah sifar berasaskan), dan akhirnya kembali keseluruhan pintu [] pelbagai termasuk objek 24 Pintu untuk memaparkannya dalam penyemak imbas.
(fungsi () var doors = []; untuk (var i = 0; i < 24; i++) doors[i] = new Door(myCal, i + 1); doors[i].content(); return doors; )();
- Demo
- Muat turun Sumber
