Cum se construiește un calendar simplu Advent în JavaScript
Adventul este perioada de așteptare și de pregătire pentru Crăciun, care începe patru duminici înainte de Ajunul Crăciunului. Trecerea timpului advent este măsurată în mod tradițional, fie cu ajutorul unui calendar advent, fie printr-o coroană adventă. Deși începutul Adventului nu este o dată fixă, Calendarele Advent încep de obicei în 1 decembrie.
Bazându-se pe obiceiurile locale, Calendarele Advent pot avea desene sau modele diferite, dar cel mai adesea ele iau forma carduri mari dreptunghiulare cu 24 de ferestre sau usi marcând zilele între 1 și 24 decembrie. Ușile ascund mesaje, poezii, rugăciuni sau puțin surprize.
În acest post vă voi arăta cum să faceți un Calendar Advent în JavaScript orientat pe obiecte. Așa cum se face în vanilla JavaScript puteți plasa cu ușurință codul în propriul dvs. site web.
- Demo
- Descărcați sursa
JavaScript Calendar Design
Calendarul nostru Advent va avea 24 de porți pe o imagine de fundal tematică de Crăciun. Fiecare ușă va ascunde un citat de Crăciun care o va face apare sub forma unui mesaj de alertă când utilizatorul face clic pe ușă. Ușile rămân închise până în ziua dată, așa cum este cazul calendarului advent real; ușile nu pot fi deschise înainte de ziua potrivită.
Ușile care sunt deja activate vor avea o culoare de fundal și de fundal diferită (alb) decât cele cu handicap (verde deschis). Vom folosi HTML5, CSS3 și JavaScript pentru a pregăti Calendarul Advent care arată cam așa:
Pasul 1 - Crearea structurii de fișiere și a resurselor
Mai întâi de toate, trebuie să alegem o imagine frumoasă de fundal. Am ales unul cu orientare portret de la Pixabay, așa că calendarul meu va conține 4 coloane și 6 rânduri.
Este bine dacă preferați o orientare peisaj. Trebuie doar să schimbați pozițiile ușilor în codul JavaScript, după cum veți avea 6 coloane și 4 rânduri. Dacă aveți imaginea, creați un dosar numit / imagini, și salvați-l.
Aceasta va fi singura noastră resursă de imagine pentru acest proiect.
Pentru fișierele JavaScript creați un / script-uri folder în dosarul rădăcină. Plasați două fișiere text goale și numiți-le calendar.js și messages.js. Calendar.js va deține funcționalitatea în timp ce messages.js va conține gama de mesaje care apar atunci când utilizatorul “se deschide” (clicuri) pe ușile.
De asemenea, vom avea nevoie de un fișier HTML și un fișier CSS, astfel încât să creați două fișiere goale în dosarul rădăcină și să le dați numele index.html și style.css.
Când sunteți gata aveți resursele și structura fișierelor, va trebui să realizați acest proiect, iar directorul rădăcină arată astfel:
Pasul 2 - Creați codul HTML
Codul HTML pe care îl folosim este destul de simplu. Foaia de stil CSS este legată în
secțiune, în timp ce două fișiere JavaScript sunt incluse în partea de jos a secțiune. Acesta din urmă este necesar, pentru că dacă le punem în scenariu secțiune, codul nu ar fi executat, așa cum este acesta utilizează elementele paginii HTML încărcate.Calendarul Advent în sine este plasat în interiorul Elementul HTML, și nu ca proprietate de fundal CSS, pentru că astfel putem să îl accesăm cu ușurință ca element al DOM.
Sub imagine, plasăm o listă goală neordonată cu “adventDoors” id selector care va fi populate de script-uri. În cazul în care utilizatorul nu are activat JavaScript în browser-ul lor, ei vor vedea doar o simplă imagine de Crăciun.
Calendar adventist Calendar adventist
Pasul 3 - Populați “Mesaje” mulțime
Avem nevoie de 24 de citate de Crăciun pentru a popula “mesaje” matrice. Mi-am ales din GoodReads.
Deschide scripturi / messages.js fişier; vom plasa citatele aici pentru a le păstra separate de funcționalitate. mesaje matricea este o matrice în interiorul unei matrice, fiecare element al matricei exterioare conține o altă matrice cu două elemente: un citat și autorul.
Populați matricele cu citatele dvs. preferate în funcție de următoarea sintaxă:
var mesaje = [["Citat 1", "Autor 1"], ["Citat 2", "Autor 2"], ... ["Citat 24", "Autor 24"]];
Pasul 4 - Adăugați stiluri de bază CSS pentru uși
Pentru a crea stilurile CSS necesare pentru ușile trebuie să ne imaginăm proiectul final, deoarece ușile vor fi create cu JavaScript în următoarele etape.
Trebuie să creați 4 coloane și 6 rânduri de dreptunghiuri în alinierea corectă. Pentru aceasta, vom folosi poziție: relativă si poziția: absolută Regulile CSS. Pe măsură ce poziția exactă se va schimba după ușă, vom adăuga top, fund, stânga, și dreapta proprietăți în JavaScript, în CSS trebuie doar să adăugăm o poziție relativă la container (listă neordonată în HTML) și poziții absolute pentru elementele listate (acestea vor fi adăugate și în JS).
Celălalt lucru important din fișierul de stil este să creați un design diferit pentru persoanele cu dizabilități și pentru stările activate. .invalid selector va fi adăugat la dezactivat prin JavaScript.
Pentru demo-ul meu Calendar am setat o margine solidă de culoare albă și fonturi albe pentru ușile activate cu un fundal alb transparent care se deplasează; și o frontieră deschisă, fonturi și un fundal deschis transparent pentru persoanele cu dizabilități. Dacă nu vă place acest design puteți schimba culorile și stilurile în funcție de dorința dumneavoastră.
Plasați următorul cod (sau regulile de stil modificate) în dvs. style.css fişier.
ul # adventDoors poziție: relativă; listă: nu există; umplutura: 0; marja: 0; #adventDoori li poziție: absolută; #adventDoors li a culoare: #fff; lățime: 100%; înălțime: 100%; font-size: 24px; text-align: centru; afișare: flex; direcția flexibilă: coloană; justify-content: centru; text-decorare: nici unul; frontieră: 1px #fff solid; #adventDoors li a: nu (.disabled): hover culoare: #fff; fundal-culoare: transparent; fundal-culoare: rgba (255,255,255,0.15); #adventDoors li a.disabled limita-culoare: # b6fe98; fundal-culoare: rgba (196254171,0.15); culoare: # b6fe98; cursor: implicit;
Pasul 5 - Creați variabilele globale
Din acest pas, vom lucra numai cu scripturi / calendar.js dosar, deci să deschidem acest lucru. Calendarul Advent va folosi două variabile globale.
myCal variabila menține imaginea Calendar ca obiect JS. Imaginea a fost deja adăugată la index.html fișier în Pasul 2. Vom plasa ușile pe această imagine în Pasul 7. Noi captură HTML asociat element marcat cu “adventCal” identificator folosind metoda getElementById () DOM. myCal variabila va fi un obiect HTMLImageElement DOM.
data curenta variabila deține data curentă, astfel încât scriptul nostru poate decide cu ușurință dacă o ușă ar trebui să fie activată sau dezactivată. A crea data curenta instanțiăm un nou obiect al clasei Date JavaScript.
Puneți fragmentul de cod în partea de sus a paginii calendar.js fişier.
var myCal = document.getElementById ("adventCal"); var actualDate = dată nouă (); Pasul 6 - Creați “Uşă” Clasă
Pentru că avem nevoie de 24 de uși, cel mai simplu mod de a face acest lucru este de a crea un “Uşă” clasă, iar ulterior să o instanțizeze de 24 de ori.
Clasa noastră de uși are doi parametri, calendar și zi. Pentru calendar parametru va trebui să treacă imaginea de Crăciun care va funcționa ca fundal. Pentru zi parametru va trebui să trecem ziua curentă în decembrie sub forma unui număr întreg.
Vom trece valorile exacte ale parametrilor în ultima etapă (Pasul 8), în timpul instanțiării obiectelor de 24 de uși.
Vom face 5 proprietăți și o metodă pentru clasa Door. În acest pas vom trece prin cele 5 proprietăți și voi explica conţinut() în etapa următoare.
“lăţime” & “înălţime” proprietăţi
lăţime și înălţime proprietăți calculează dinamic lățimea și înălțimea fiecărei uși individuale (care se modifică în funcție de lățimea și înălțimea imaginii de fundal).
Multiplicatorii 0.1 și 0.95 sunt în ecuația de a lăsa un spațiu pentru margini, între fiecare ușă și în jurul părților laterale ale Calendarului.
“adventMessage” proprietate
adventMessage proprietatea deține conținutul mesajelor de avertizare, și anume citatele și autorii care se potrivesc cu noi messages.js fișierul este valabil. adventMessage proprietate ia un citat și un autor de la mesaje [] array, în funcție de data curentă.
Pentru dec. 1 adventMessage proprietatea ia primul element al matricei exterioare care este Mesaje [0], deoarece matricele sunt bazate pe zero în JavaScript.
Din același motiv, cotația pentru Dec 1 este poziționată ca Mesaje [0] [0] (primul element al matricei interioare), iar autorul de potrivire poate fi atins ca Mesaje [0] [1] (al doilea element al matricei interioare).
“X”&”y” proprietăţi
Proprietăți X și y țineți pozițiile corespunzătoare fiecărei uși pe care o vom folosi în pasul următor pentru a seta top și stânga Proprietăți CSS. Acestea vor completa poziție: relativă și poziția: absolută Regulile CSS pe care le-am stabilit în pasul 4 pentru containerul ușii (ul # adventDoors) și ușile în sine (#adventDoors li). Calculele pot părea oarecum intimidante, dar să mergem repede prin ele.
X proprietatea va fi utilizată de către stânga CSS de poziționare a proprietății în etapa următoare (Pasul 7). Aceasta determină în pixeli unde o ușă individuală trebuie plasată pe axa x.
Este nevoie de lățimea imaginii de fundal, și lasă o marjă mică pentru aceasta (4%). Apoi, cu ajutorul operatorului rămas, el evaluează în ce coloană va fi plasată (amintiți-vă că vor exista 4 coloane), și în final adaugă o marjă mică (10%) la fiecare ușă individuală utilizând un multiplicator 1.1.
În același mod, y proprietatea va fi utilizată de către top CSS de poziționare a proprietății și, de asemenea, determină în pixeli unde o ușă individuală trebuie plasată pe axa y.
Luăm înălțimea imaginii de fundal cu ajutorul proprietății de înălțime a pătrunderii calendar parametru (care deține un obiect DOM) și lasă o marjă de 4% în jurul versiunilor verticale ale calendarului.
Apoi, cu ajutorul metodei Math.floor () se calculează în ce rând va fi un obiect Door dat (vor fi șase rânduri).
În cele din urmă, adăugăm o marjă de 10% pentru fiecare obiect Door prin înmulțirea înălțimii acestuia cu un multiplicator de 1,1.
funcția Ușă (calendar, zi) this.width = ((calendar.width - 0.1 * calendar.width) / 4) * 0.95; this.height = ((calendar.height - 0.1 * calendar.height) / 6) * 0.95; this.adventMessage = 'Ziua' + zi + 'din Advent \ n \ n' + '' '+ mesaje [zi - 1] [0] +' '\ n \ - 1] [1] + '\ n \ n'; this.x = (0,04 * calendar.width + ((zi - 1)% 4) * (1,1 * această lățime)); this.y = - (0.96 * calendar.height - Math.floor ((zi - 1) / 4) * (1.1 * this.height)); this.content = funcția () ...;
Pasul 7 - Populați “Conţinut()” Metodă
Este conţinut() metoda care ne va afișa ușile în browser. Mai întâi, vom crea un nou nod DOM cu ajutorul variabilei nodul care va crea
Deoarece clasa de ușă va fi instanțiată de 24 de ori într-o buclă pentru pentru următorul pas (pasul 8), aceasta înseamnă că vom avea 24
Proprietatea node.id din linia următoare adaugă un selector id unic pentru fiecare element de listă (ușă). Vom avea nevoie de acest lucru pentru a putea trece cu ușurință în zilele următoare (pasul 8). În felul acesta, Ușa 1 va avea un id =”door1", Ușa 2 va avea un id =”door2" selector etc..
Proprietatea node.style.cssText din linia următoare adaugă câteva reguli CSS fiecărui element de listă (ușă) cu ajutorul style =”... ” Atributul HTML folosit pentru a include CSS inline în fișiere HTML. node.style.cssText proprietatea utilizează proprietățile clasei de uși pe care am stabilit-o în etapa anterioară (Pasul 6).
Pentru a face Obiectul Door clic clic trebuie de asemenea să adăugăm un tag în interiorul elementelor din listă. Atingem acest lucru cu ajutorul innerNode variabilă pe care o legăm ca element copil la elementul de listă corespunzător identificat de către id =”Ușă [i]” selectorul (cu [i] fiind numărul zilei), folosind metoda DOM appendChild () la fel ca înainte.
Proprietatea innerHTML din următoarea linie afișează ziua curentă (1-24) deasupra ușii în browser și adăugăm și href =”#” atribuiți etichetelor ancorei prin proprietatea href DOM.
În cele din urmă, în instrucțiunea if-else, evaluăm dacă un obiect Door ar trebui să fie activat sau dezactivat. În primul rând, vom examina dacă suntem în luna a 12-a (decembrie) utilizând metoda getMonth () a obiectului Date. Trebuie să adăugăm 1, deoarece getMonth () este bazat pe zero (ianuarie este luna 0, etc.).
După aceasta, verificăm dacă data curentă se află în data curenta variabila globală stabilită în pasul 5 este mai mică decât zi că obiectul obișnuit al ușii reprezintă.
Dacă nu este decembrie sau ziua reprezentată de ușa dată este mai mare decât data curentă, ușa ar trebui dezactivată, în alte cazuri trebuie să fie activată astfel încât utilizatorii să poată da clic pe ea și să vadă mesajul Advent.
Dacă ușa este dezactivată, adăugăm a class =”invalid” selector la tag-ul de ancorare dat cu ajutorul proprietății className. Amintiți-vă, deja am desenat .invalid clasa cu CSS în Pasul 4. De asemenea, trebuie să setăm atributul eveniment onclick HTML pentru a reveni false.
Dacă Ușa este în stare activă, adăugăm adventMessage proprietate la un mesaj de alertă și plasați-l în atributul eveniment eveniment onclick.
this.content = funcția () var node = document.createElement ("li"); document.getElementById ( "adventDoors") appendChild (nod). node.id = "ușă" + zi; node.style.cssText = "width:" + this.width + "px; height:" + this.height + "px; top:" + this.y + "px; stânga:" + this.x + "px ; "; var innerNode = document.createElement ("a"); document.getElementById ("ușă" + zi) .appendChild (innerNode); innerNode.innerHTML = zi; innerNode.href = "#"; dacă ((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; ; Pasul 8 - Inițializați “Uşă” Obiecte
În cele din urmă, trebuie să inițializăm clasa Door de 24 de ori.
Pentru a face acest lucru, folosim o expresie a funcției imediat invocate, care este destul de utilă aici, pentru că nu avem nevoie de o variabilă deoarece dorim doar să executăm codul în interiorul funcției o singură dată.
Noi creăm a usi [] array care va păstra obiectele 24 de uși. Vom trece prin zilele de la 1 la 24 (ele vor fi elementele 0-23 a ușii [], deoarece matricele sunt bazate pe zero), și în cele din urmă returnează întregul usi [] inclusiv 24 de obiecte pentru a le afișa în browser.
(funcția () var uși = []; pentru (var i = 0; i < 24; i++) doors[i] = new Door(myCal, i + 1); doors[i].content(); return doors; )();
- Demo
- Descărcați sursa
