Kako izgraditi jednostavan adventni kalendar u JavaScriptu
Advent je razdoblje čekanja i priprema za Božić koji počinje četiri nedjelje prije Božića. Prolazak adventskog vremena tradicionalno se mjeri pomoću adventnog kalendara ili adventnog vijenca. Iako početak Adventa nije fiksni datum, adventski kalendari obično počinju 1. prosinca.
Na temelju lokalnih običaja, Adventski kalendari mogu imati različite dizajne, ali najčešće su u obliku velike pravokutne kartice s 24 prozora ili vrata označava dane između 1. i 24. prosinca. Vrata skrivaju poruke, pjesme, molitve ili mala iznenađenja.
U ovom postu ću vam pokazati kako napraviti adventni kalendar u objektno orijentiranom JavaScriptu. Kako je napravljen u vanilijskom JavaScriptu, lako možete postaviti kôd na vlastitu web-lokaciju.
- Demo
- Preuzimanje izvora
Dizajn kalendara JavaScripta
Naš Adventni kalendar imat će 24 vrata na božićnoj pozadini. Svaka vrata će sakriti božićni citat koji će biti pojavljuje se u obliku poruke upozorenja kada korisnik klikne na vrata. Vrata ostaju zatvorena dok ne dođe dan, kao što je to slučaj sa stvarnim životom Adventnog kalendara; vrata se ne mogu otvoriti prije pravog dana.
Vrata koja su već omogućena imat će različite granice i boju pozadine (bijela) od onih s invaliditetom (svjetlosna). Koristit ćemo HTML5, CSS3 i JavaScript za pripremu Adventnog kalendara koji izgleda ovako:
Korak 1 - Stvorite strukturu datoteke i resurse
Prije svega, moramo odabrati lijepu pozadinsku sliku. Izabrao sam jednu s portretnom orijentacijom iz Pixabaya, tako da će moj kalendar sadržavati 4 stupca i 6 redaka.
To je u redu ako više volite pejzažnu orijentaciju. Samo promijenite pozicije vrata u JavaScript kodu, kao što ćete imati 6 stupaca i 4 retka. Ako imate sliku, stvorite mapu pod nazivom / slike, i spremite ga.
To će biti naš jedini resurs za ovaj projekt.
Za JavaScript datoteke stvorite / skripte unutar korijenske mape. Stavite dvije prazne tekstualne datoteke u njega i imenujte ih calendar.js i messages.js. Calendar.js će zadržati funkcionalnost, dok messages.js će sadržavati niz poruka koje se pojavljuju kada korisnik “otvara” (klikne) vrata.
Trebat će nam i HTML i CSS datoteka, tako da u korijenskoj mapi stvorite dvije prazne datoteke i dajte im imena index.html i style.css.
Kada budete spremni, imate resurse i strukturu datoteke koje ćete morati izvršiti, a vaša korijenska mapa izgleda ovako:
Korak 2 - Stvorite HTML
HTML kod koji koristimo prilično je jednostavan. CSS stylesheet je povezan u
, dok je dvije JavaScript datoteke su uključene na dnu odjeljak. Potonje je potrebno, jer ako stavimo skripte u odjeljak, kôd se ne bi izvršio, kao što je koristi elemente učitane HTML stranice.Sam Adventni kalendar nalazi se unutar HTML element, a ne kao CSS pozadinsko svojstvo, jer ga na taj način lako možemo pristupiti kao element DOM-a.
Ispod slike stavljamo prazan neuređeni popis s “adventDoors” id selektor koji će biti popunjen skriptama. Ako korisnik u svom pregledniku nema omogućen JavaScript, vidjet će jednostavnu božićnu sliku.
Adventski kalendar Adventski kalendar
Korak 3 - Popunite “poruke” red
Trebamo 24 božićna citata za popunjavanje “poruke” polje. Izabrao sam svoj od GoodReadsa.
Otvori skripte / messages.js datoteka; ovdje ćemo staviti navodnike kako bi bili odvojeni od funkcionalnosti. poruke polje je niz unutar niza, svaki element vanjskog niza sadrži još jedan niz s dva elementa: citat i njegovog autora.
Popunite polje omiljenim navodima prema sljedećoj sintaksi:
var messages = [["Citat 1", "Autor 1"], ["Citat 2", "Autor 2"],… ["Citat 24", "Autor 24"]];
Korak 4 - Dodajte osnovne CSS stilove za vrata
Za izradu potrebnih CSS stilova za vrata trebamo zamisliti konačni dizajn, budući da će se sama vrata stvoriti pomoću JavaScripta u sljedećim koracima..
Moramo stvoriti 4 stupca i 6 redova pravokutnika u pravilnom poravnanju. Za to ćemo koristiti pozicija: relativna i pozicija: apsolutna CSS pravila. Kako se točno mjesto mijenja od vrata do vrata, dodat ćemo vrh, dno, lijevo, i pravo svojstva u JavaScriptu, u CSS-u samo trebamo dodati relativnu poziciju kontejneru (neuređeni popis u HTML-u), i apsolutne pozicije za elemente popisa (oni će također biti dodani u JS).
Druga važna stvar u datoteci stilova jest stvorite drugačiji dizajn za onemogućene i omogućene države. .onemogućeno selektor će biti dodan onemogućenom JavaScriptu.
Za svoj demo kalendar postavljam čvrste bijele obrube i bijele fontove za omogućena vrata s prozirnom bijelom pozadinom pri lebdjenju; i obrub osvijetljen zelenom bojom, i fontove i transparentnu pozadinu svjetlozelenih za osobe s invaliditetom. Ako vam se ovaj dizajn ne sviđa, možete promijeniti boje i stilove prema vašoj želji.
Postavite sljedeći kôd (ili izmijenjena pravila stila) u svoj style.css datoteka.
ul # adventDoors position: relative; list-style: nema; padding: 0; margina: 0; #adventDoors li position: absolute; #adventDoors li a color: #fff; širina: 100%; visina: 100%; veličina fonta: 24px; poravnavanje teksta: centar; zaslon: flex; smjer savijanja: stupac; justify-content: centar; text-decoration: none; granica: 1px #fff čvrsta; #adventDoors li a: not (.disabled): hover color: #fff; pozadinska boja: transparentna; pozadinska boja: rgba (255,255,255,0.15); #adventDoors li a.disabled border-color: # b6fe98; pozadinska boja: rgba (196,254,171,0.15); boja: # b6fe98; pokazivač: zadano;
Korak 5 - Stvaranje globalnih varijabli
Od ovog koraka dalje ćemo raditi samo s skripte / calendar.js Datoteku, pa sada otvorimo ovo. Naš Adventni kalendar koristit će dvije globalne varijable.
myCal varijabla drži sliku kalendara kao JS objekt. Slika je već dodana u index.html Datoteka u 2. koraku. Postavit ćemo vrata na ovu sliku u 7. koraku element označen sa “adventCal” pomoću metode getElementById () DOM. myCal varijabla će biti HTMLImageElement DOM objekt.
trenutni datum varijabla sadrži trenutni datum tako da naša skripta može lako odlučiti treba li omogućiti ili onemogućiti vrata. Stvoriti trenutni datum stvaramo novi objekt klase Date JavaScript.
Stavite sljedeći isječak koda na vrh calendar.js datoteka.
var myCal = document.getElementById ("adventCal"); var currentDate = novi datum (); Korak 6 - Stvorite “Vrata” klasa
Budući da nam je potrebno 24 vrata, najjednostavniji način da to učinimo je stvaranje a “Vrata” klasa, a kasnije je instancirajte 24 puta.
Naša klasa vrata ima dva parametra, kalendar i dan. Za kalendar parametar morat ćemo proći božićnu sliku koja će funkcionirati kao pozadina. Za dan parametar trebamo proslijediti tekući dan prosinca u obliku cijelog broja.
Točne vrijednosti parametara ćemo proslijediti u zadnjem koraku (korak 8), za vrijeme stvaranja objekata 24 vrata.
Napravit ćemo 5 svojstava i 1 metodu za Door klasu. U ovom koraku proći ćemo samo kroz 5 svojstava i objasnit ću sadržaj() u sljedećem koraku.
“širina” & “visina” nekretnine
širina i visina svojstva dinamički izračunavaju širinu i visinu svakog pojedinog vrata (koji se mijenja prema širini i visini pozadinske slike).
Multiplikatori 0,1 i 0,95 su u jednadžbi kako bi ostavili prostor za margine, između svakog vrata, i oko strana kalendara, također.
“adventMessage” svojstvo
adventMessage vlasništvo sadrži sadržaj poruka upozorenja, to jest citate i autore koji odgovaraju messages.js Datoteka ima. adventMessage vlasništvo uzima citat i autor iz [poruke] niz, ovisno o tekućem datumu.
Za 1. prosinca adventMessage svojstvo uzima prvi element vanjskog polja koji je poruka [0], kao polja koja se temelje na nuli u JavaScriptu.
Iz istog razloga, citat za 1. prosinca je pozicioniran kao poruka [0] [0] (prvi element unutarnjeg niza), a odgovarajući autor može se postići kao poruka [0] [1] (drugi element unutarnjeg niza).
“x”&”y” nekretnine
Nekretnine x i y držite odgovarajuće položaje svakog vrata koje ćemo koristiti u sljedećem koraku za postavljanje vrh i lijevo CSS svojstva. To će nadopuniti pozicija: relativna i pozicija: apsolutna CSS pravila koja smo postavili u koraku 4 za kontejner za vrata (ul # adventDoors) i vrata sama (#adventDoors li). Izračuni mogu izgledati pomalo zastrašujuće, ali idemo brzo kroz njih.
x vlasništvo će koristiti lijevo Svojstvo pozicioniranja CSS-a u sljedećem koraku (korak 7). Ona određuje u pikselima gdje se pojedinačna vrata trebaju postaviti na os x.
Zauzima širinu pozadinske slike, a za nju ostavlja malo margine (4%). Zatim, uz pomoć operatora ostatka, procjenjuje u kojem će se stupcu smjestiti (zapamtite, bit će 4 stupca), i na kraju dodaje malu (10%) marginu svakom pojedinačnom Vrtu pomoću 1,1 množitelja.
Na isti način y vlasništvo će koristiti vrh Svojstvo pozicioniranja CSS-a, a isto tako određuje u pikselima gdje se pojedinačna vrata trebaju postaviti na y-osi.
Visinu pozadinske slike uzimamo pomoću svojstva visine propuštenog kalendar parametar (koji sadrži DOM-objekt) i ostavlja marginu od 4% oko vertikalnih strana kalendara.
Zatim, uz pomoć metode Math.floor () izračunavamo u kojem retku će biti određeni objekt Vrata (bit će 6 redaka).
Na kraju dodamo 10% margine za svaki Door objekt množenjem njegove visine pomoću 1,1 množitelja.
funkcija Vrata (kalendar, dan) this.width = ((calendar.width - 0.1 * calendar.width) / 4) * 0.95; this.height = ((calendar.height - 0.1 * calendar.height) / 6) * 0.95; this.adventMessage = 'Dan' + dan + 'Adventa n' + '"' + poruka [dan - 1] [0] + '" \ t - 1] [1] + 'n'; this.x = (0.04 * calendar.width + ((dan - 1)% 4) * (1.1 * this.width)); this.y = - (0.96 * calendar.height - Math.floor ((dan - 1) / 4) * (1.1 * ovo.visina)); this.content = function () …;
Korak 7 - Popunite “Sadržaj()” način
To je sadržaj() metoda koja će prikazati naša vrata u pregledniku. Prije svega, kreiramo novi DOM čvor uz pomoć varijable čvor koji će stvoriti
Budući da će klasa Vrata biti instancirana 24 puta u petlji za sljedeći korak (korak 8), to znači da ćemo imati 24
Svojstvo node.id u sljedećem retku dodaje izbornik jedinstvenog id svakog elementa popisa (vrata). Ovo će nam biti potrebno da bismo mogli ispravno provjeravati dane u sljedećem koraku (korak 8). Na taj način Vrata 1 će imati id =”door1", Vrata 2 će imati id =”door2" izbornik, itd.
Svojstvo node.style.cssText u sljedećem retku dodaje neke CSS pravila na svaki element popisa (vrata) uz pomoć style =”... ” HTML atribut koji se koristi za uključivanje ugrađenog CSS-a u HTML datoteke. node.style.cssText svojstvo koristi svojstva klase vrata koja smo postavili u prethodnom koraku (korak 6).
Da bi naš objekt Door mogao kliknuti, također moramo dodati unutar elemenata popisa. To postižemo uz pomoć innerNode varijabla koju povezujemo kao podređeni element s odgovarajućim elementom popisa kojeg identificira id =”Vrata [i]” selektor (s danim brojem [i]), korištenjem metode appendChild () DOM kao i prije.
Svojstvo innerHTML u sljedećem retku prikazuje trenutni dan (1-24) na vrhu vrata u pregledniku, a dodajemo i href =”#” atribut našim sidrenim oznakama pomoću href DOM svojstva.
Naposljetku, u if-else izrazu, procijenimo je li objekt Door trebao biti omogućen ili onemogućen. Prvo ćemo ispitati jesmo li u 12. mjesecu godine (prosinac) pomoću metode getMonth () objekta Date. Moramo dodati 1 jer je getMonth () zasnovan na nuli (siječanj je mjesec 0, itd.).
Nakon toga provjeravamo je li trenutni datum u trenutni datum globalna varijabla koju smo postavili u koraku 5 je manja od dan trenutni objekt Vrata.
Ako nije prosinac, ili dan koji predstavlja dano vrata je veći od trenutnog datuma, vrata bi trebala biti onemogućena, u svim drugim slučajevima mora biti omogućena, tako da korisnici mogu kliknuti na nju i vidjeti odgovarajuću Advent poruku.
Ako su Vrata onemogućena, dodamo a class =”onemogućeno” selektora na zadanu oznaku sidra uz pomoć svojstva className. Zapamtite, već smo oblikovali .onemogućeno klasa s CSS-om u 4. koraku. Također moramo postaviti atribut događaja onclick HTML da se vrati false.
Ako je Vrata u omogućenom stanju, dodajemo adventMessage na poruku upozorenja i smjestite je u atribut događaja događaja onclick.
this.content = function () var node = document.createElement ("li"); document.getElementById ( "") adventDoors appendChild (čvor). node.id = "vrata" + dan; node.style.cssText = "širina:" + this.width + "px; height:" + this.height + "px; vrh:" + this.y + "px; lijevo:" + this.x + "px ; " var innerNode = document.createElement ("a"); document.getElementById ("vrata" + dan) .appendChild (innerNode); innerNode.innerHTML = dan; innerNode.href = "#"; ako ((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; ; Korak 8 - Inicijalizirajte “Vrata” objekti
Konačno, moramo pokrenuti klasu Door 24 puta.
Da bismo to učinili, koristimo izraz Izravno pozvana funkcija koji je ovdje vrlo koristan, jer ne trebamo varijablu jer želimo samo jednom izvršiti kod unutar funkcije.
Stvaramo [vrata] koji će držati objekte od 24 vrata. Prolazimo kroz dane od 1 do 24 (oni će biti 0-23-ti elementi polja vrata [], budući da su polja bazirana na nuli), i na kraju vraćaju cijeli [vrata] niza, uključujući objekte s 24 vrata, za prikaz u pregledniku.
(function () var doors = []; for (var i = 0; i < 24; i++) doors[i] = new Door(myCal, i + 1); doors[i].content(); return doors; )();
- Demo
- Preuzimanje izvora
