Sådan opbygger du en enkel Advent-kalender i JavaScript
Advent er ventetiden og forbereder til jul, som begynder fire søndage før juleaften. Advent-tiden er målt traditionelt ved hjælp af enten en Adventskalender eller en Adventkran. Selv om Adventens begyndelse ikke er en fast dato, begynder Advent Calendars normalt den 1. december.
Adventskalendere kan på baggrund af lokale skikke have forskellige design, men oftest tager de form af store rektangulære kort med 24 vinduer eller døre markerer dagene mellem 1. og 24. december. Dørene skjuler meddelelser, digte, bønner eller små overraskelser.
I dette indlæg vil jeg vise dig, hvordan man skal lav en adventskalender i objektorienteret JavaScript. Som det er lavet i vanilla JavaScript, kan du nemt placere koden på din egen hjemmeside.
- Demo
- Download kilde
JavaScript Kalender Design
Vores Adventskalender har 24 døre på et juletema baggrundsbilde. Hver dør vil skjule et jul-relateret citat, der vil dukker op i form af en advarselsmeddelelse, når brugeren klikker på døren. Dørene forbliver lukkede, indtil den givne dag kommer, som det er tilfældet med det virkelige liv Advent Calendar; Dørene kan ikke åbnes før den rigtige dag.
Døre, der allerede er aktiveret, har en anden grænse og baggrundsfarve (hvid) end de handicappede (lysegrøn). Vi bruger HTML5, CSS3 og JavaScript til at forberede vores Advent Calendar, der ser sådan ud:
Trin 1 - Opret filstruktur og ressourcer
Først og fremmest skal vi vælge et godt baggrundsbilde. Jeg valgte en med portrætorientering fra Pixabay, så min kalender vil indeholde 4 kolonner og 6 rækker.
Det er fint, hvis du foretrækker en landskabsorientering. Du skal bare ændre dørpositionerne i JavaScript-koden, som du har 6 kolonner og 4 rækker. Hvis du har dit billede, skal du oprette en mappe, der hedder / billeder, og gem det.
Dette er vores eneste billedressource til dette projekt.
For JavaScript-filer opretter en / scripts mappe inde i din rodmappe. Placer to tomme tekstfiler i den og navngiv dem calendar.js og messages.js. Calendar.js vil holde funktionaliteten, mens messages.js vil indeholde en række meddelelser, der pop op når brugeren “åbner” (klikker på) dørene.
Vi skal også have en HTML og en CSS-fil, så lav to tomme filer inde i din rodmappe og giv dem navnene index.html og style.css.
Når du er klar, har du ressourcer og filstruktur, du skal udføre dette projekt, og din rodmappe ser sådan ud:
Trin 2 - Opret HTML
Den HTML-kode, vi bruger, er ret ligetil. CSS stilarket er linket i
afsnit, mens to JavaScript-filer er inkluderet i bunden af afsnit. Sidstnævnte er nødvendigt, fordi hvis vi lægger skripterne ind i sektionen, vil koden ikke blive udført, som den bruger elementerne på den indlæste HTML-side.Adventskalenderen selv er placeret inde i HTML-element, og ikke som en CSS-baggrundsegenskab, fordi denne måde vi let kan få adgang til som et element i DOM.
Under billedet placeres en tom uordnet liste med “adventDoors” id vælger, der vil blive befolket af scripts. Hvis brugeren ikke har aktiveret JavaScript i deres browser, vil de bare se et simpelt julbillede.
Adventskalender Adventskalender
Trin 3 - Udvikl “Beskeder” Array
Vi har brug for 24 julemadater for at udfylde “Beskeder” array. Jeg valgte min fra GoodReads.
Åbn scripts / messages.js fil; vi vil placere citaterne her for at holde dem adskilt fra funktionaliteten. Det Beskeder array er en matrix inde i et array, hvert element i den ydre matrix indeholder et andet array med to elementer: et citat og dets forfatter.
Udvikl arrayet med dine yndlingsnotater i henhold til følgende syntaks:
var meddelelser = [["Citat 1", "Forfatter 1"], ["Citat 2", "Forfatter 2"], ... ["Citat 24", "Forfatter 24"]];
Trin 4 - Tilføj grundlæggende CSS-stilarter til dørene
For at skabe de nødvendige CSS-stilarter til dørene skal vi forestille os det endelige design, da dørene selv vil blive oprettet med JavaScript i de følgende trin.
Vi skal oprette 4 kolonner og 6 rækker af rektangler i korrekt justering. Til dette vil vi bruge position: relative og position: absolut CSS regler. Da den nøjagtige position ændrer døren efter dør, tilføjer vi top, bund, venstre, og ret egenskaber i JavaScript, i CSS skal vi bare tilføje en relativ position til containeren (uordnet liste i HTML) og absolutte positioner for listelementerne (de vil også blive tilføjet i JS).
Den anden vigtige ting i stilarkarken er at Opret et andet design for handicappede og de aktiverede tilstande. Det .handicappet vælger vil blive tilføjet handicappede af JavaScript.
For min demokalender sætter jeg en solid hvid ramme og hvide skrifttyper til de aktiverede døre med en gennemsigtig hvid baggrund på svingning; og en lysegrøn kant og skrifttyper og en gennemsigtig lysegrøn baggrund for handicappede. Hvis du ikke kan lide dette design, kan du ændre farver og stilarter efter dine ønsker.
Indsæt følgende kode (eller dine ændrede stilregler) i din style.css fil.
ul # adventDoors position: relative; listestil: none; polstring: 0; margen: 0; #adventDoors li position: absolute; #adventDoors li a color: #fff; bredde: 100%; højde: 100%; skrifttypestørrelse: 24px; tekst-align: center; display: flex; flex-retning: kolonne; retfærdiggør indhold: center; tekst dekoration: ingen; grænse: 1px #fff solid; #adventDoors li a: not (.disabled): svever farve: #fff; baggrundsfarve: gennemsigtig; baggrundsfarve: rgba (255,255,255,0,15); #adventDoors li a.disabled border-color: # b6fe98; baggrundsfarve: rgba (196.254.171,0.15); farve: # b6fe98; markør: default;
Trin 5 - Opret de globale variabler
Fra dette trin vil vi kun arbejde med scripts / calendar.js fil, så lad os nu åbne dette. Vores Adventskalender bruger to globale variabler.
Det myCal variabel holder kalenderbilledet som et JS-objekt. Billedet er allerede blevet tilføjet til index.html filen i trin 2. Vi placerer dørene på dette billede i trin 7. Vi fanger den relaterede HTML element markeret med “adventCal” identifikator ved hjælp af getElementById () DOM-metoden. Det myCal variabel vil være et HTMLImageElement DOM objekt.
Det nuværende dato variabel holder den aktuelle dato, så vores script nemt kan bestemme, om en dør skal aktiveres eller deaktiveres. At skabe nuværende dato Vi instantierer et nyt objekt af Date JavaScript-klassen.
Sæt følgende kodestykke i toppen af din calendar.js fil.
var myCal = document.getElementById ("adventCal"); var currentDate = ny dato (); Trin 6 - Opret “Dør” klasse
Da vi har brug for 24 døre, er den mest enkle måde at gøre dette på at skabe en “Dør” klasse, og senere instantiere det 24 gange.
Vores dørklasse har to parametre, kalender og dag. For kalender parameter skal vi videregive julbilledet, der vil fungere som baggrund. For dag parameter vi skal passere den nuværende december i form af et helt tal.
Vi vil videregive de nøjagtige værdier af parametrene i det sidste trin (Trin 8) under instansen af de 24 Dør objekter.
Vi vil lave 5 egenskaber og 1 metode til dørklassen. I dette trin vil vi kun gå gennem de 5 ejendomme, og jeg vil forklare indhold() metode i næste trin.
Det “bredde” & “højde” ejendomme
Det bredde og højde Egenskaber beregner dynamisk bredden og højden af hver enkelt dør (som ændrer sig i forhold til bredden og højden af baggrundsbilledet).
0.1 og 0.95 multiplikatorerne er i ligningen at lade noget plads til margenerne, mellem hver dør og omkring siderne af kalenderen, også.
Det “adventMessage” ejendom
Det adventMessage Ejendommen har indholdet af advarselsmeddelelserne, nemlig citaterne og de tilhørende forfattere, som vores messages.js fil hold. Det adventMessage ejendom tager et citat og en forfatter fra Beskeder[] array afhængigt af den aktuelle dato.
For 1 december den adventMessage Egenskaben tager det første element i det ydre array, som er messages [0], som arrays er nulbaseret i JavaScript.
Af samme grund er citatet for 1. december placeret som messages [0] [0] (første element i det indre array), og den matchende forfatter kan nås som messages [0] [1] (andet element i det indre array).
Det “x”&”y” ejendomme
Ejendomme x og y Hold de rette positioner for hver dør, som vi vil bruge i næste trin for at indstille top og venstre CSS egenskaber. Disse vil supplere position: relative og position: absolut CSS regler, som vi sætter i trin 4 for dørbeholderen (ul # adventDoors), og dørene selv (#adventDoors li). Beregningerne kan virke lidt skræmmende, men lad os gå hurtigt igennem dem.
Det x ejendom vil blive brugt af venstre CSS positioneringsegenskab i næste trin (Trin 7). Det bestemmer i pixels, hvor en individuel dør skal placeres på x-aksen.
Det tager bredden af baggrundsbilledet, og det giver en lille margin for det (4%). Herefter vurderer den med resten af operatøren, hvilken kolonne den vil blive placeret (husk, at der vil være 4 kolonner), og endelig tilføjer det en lille (10%) margen til hver enkelt Dør ved at bruge en 1,1 multiplikator.
På samme måde, y ejendom vil blive brugt af top CSS positioneringsegenskab, og det bestemmer ligeledes i pixels, hvor en individuel dør skal placeres på y-aksen.
Vi tager højden af baggrundsbilledet ved hjælp af højden ejendommen af den indsendte kalender parameter (der har en DOM-objekt), og efterlad en 4% margen omkring de vertikale sider af kalenderen.
Derefter beregner vi ved hjælp af metoden Math.floor () i hvilken række en given Dørobjekt vil være (der vil være 6 rækker).
Endelig tilføjer vi en 10% margen for hver Dør-objekt ved at gange dens højde ved hjælp af en 1,1 multiplikator.
funktion Dør (kalender, dag) this.width = ((calendar.width - 0.1 * calendar.width) / 4) * 0.95; this.height = ((calendar.height - 0.1 * calendar.height) / 6) * 0.95; this.adventMessage = 'Dag' + dag + 'af Advent \ n \ n' + '"' + meddelelser [dag - 1] [0] + '" \ n \ n \ t' + 'af' + meddelelser [dag - 1] [1] + '\ n \ n'; this.x = (0,04 * calendar.width + ((dag - 1)% 4) * (1.1 * this.width)); this.y = - (0.96 * calendar.height - Math.floor ((dag - 1) / 4) * (1.1 * this.height)); this.content = function () ...;
Trin 7 - Udvikl “Indhold()” Metode
Det er indhold() metode der viser vores døre i browseren. Først og fremmest opretter vi en ny DOM-knude ved hjælp af variablen node det vil skabe
Da dørklassen vil blive instantiated 24 gange i en for-loop i næste trin (trin 8) betyder det, at vi vil have 24
Egenskaben node.id i den næste linje tilføjer en unik idvælger til hvert listelement (dør). Vi skal bruge dette for at kunne løbe korrekt igennem dagene i næste trin (Trin 8). Denne vej Dør 1 vil have en id =”door1", Dør 2 vil have en id =”door2" vælger mv.
Egenskaben node.style.cssText i den næste linje tilføjer nogle CSS-regler til hvert listeelement (dør) ved hjælp af style =”... ” HTML attribut, der bruges til at indeholde inline CSS i HTML-filer. Det node.style.cssText ejendom bruger egenskaberne for dørklassen, som vi satte i det foregående trin (trin 6).
For at gøre vores Dørobjekt klikbart, skal vi også tilføje en tag inde i listen elementer. Vi opnår dette ved hjælp af innerNode variabel, som vi binder som et barnelement til det relevante listelement, der er identificeret af id =”dør [i]” vælger (med [i] er dagnummeret) ved at bruge appendChild () DOM-metoden som før.
Egenskaben innerHTML i den næste linje viser den aktuelle dag (1-24) oven på døren i browseren, og vi tilføjer også en href =”#” attribut til vores anker tags ved hjælp af href DOM egenskaben.
Endelig vurderer vi i if-else-sætningen, om et Dør-objekt skal aktiveres eller deaktiveres. For det første undersøger vi, om vi er i årets 12. måned (december) ved at bruge metoden getMonth () i Date-objektet. Vi skal tilføje 1, fordi getMonth () er nulbaseret (januar er måned 0 osv.).
Herefter kontrolleres, om den aktuelle dato i nuværende dato global variabel vi sætter i trin 5 er mindre end dag som den nuværende Dør-objekt repræsenterer.
Hvis det ikke er december, eller den dag, der repræsenteres af den givne dør, er større end den aktuelle dato, skal døren være deaktiveret, i andre tilfælde skal den være aktiveret, så brugerne kan klikke på den og se den tilhørende Advent-besked.
Hvis døren er deaktiveret, tilføjer vi en class =”handicappet” vælger til det givne ankermærke ved hjælp af className-ejendommen. Husk, vi har allerede stylet .handicappet klasse med CSS i trin 4. Vi skal også indstille onclick HTML-hændelsesattributten for at returnere falsk.
Hvis døren er i aktiveret tilstand, tilføjer vi adventMessage ejendom til en advarselsmeddelelse, og placere den inde i attributten onclick HTML-hændelse.
this.content = function () var node = document.createElement ("li"); document.getElementById ( "adventDoors") appendChild (node).; node.id = "dør" + dag; node.style.cssText = "width:" + this.width + "px; højde:" + this.height + "px; top:" + this.y + "px; venstre:" + this.x + "px ; "; var innerNode = document.createElement ("a"); document.getElementById ("dør" + dag) .appendChild (innerNode); innerNode.innerHTML = dag; innerNode.href = "#"; hvis ((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; ; Trin 8 - Initialiser “Dør” objekter
Endelig skal vi initialisere dørklassen 24 gange.
For at gøre det bruger vi en Umiddelbart Invoked Function Expression, der er ret nyttig her, fordi vi ikke har brug for en variabel, da vi kun ønsker at udføre koden inde i funktionen en gang.
Vi opretter en døre [] array, der vil holde 24 Dør objekter. Vi løber gennem dagene fra 1 til 24 (de vil være 0-23 elementerne i dørene [] arrayet, da arrayer er nulbaserede) og endelig vender tilbage hele døre [] array herunder 24 Dør objekter at vise dem i browseren.
(funktion () var doors = []; for (var i = 0; i < 24; i++) doors[i] = new Door(myCal, i + 1); doors[i].content(); return doors; )();
- Demo
- Download kilde
