Slik bygger du en enkel adventskalender i JavaScript
Advent er ventetiden og forbereder seg til jul som begynner fire søndager før julaften. Forløpet av Advent-tiden måles tradisjonelt ved hjelp av enten en Adventskalender eller en Adventkran. Selv om begynnelsen av Advent ikke er en fast dato, begynner Adventskalendere vanligvis 1. desember.
Adventskalendere kan, basert på lokale skikker, ha forskjellige design, men oftest de tar form av store rektangulære kort med 24 vinduer eller dører markerer dagene mellom 1. og 24. desember. Dørene skjuler meldinger, dikt, bønner eller små overraskelser.
I dette innlegget vil jeg vise deg hvordan lage en adventskalender i objektorientert JavaScript. Som det er laget i vanilla JavaScript, kan du enkelt sette koden inn på din egen nettside.
- Demo
- Last ned kilde
JavaScript Kalender Design
Vår Adventskalender vil ha 24 dører på et julemiddag bakgrunnsbilde. Hver dør vil gjemme et julelatert sitat som vil dukker opp i form av en varselmelding når brukeren klikker på døren. Dørene forblir stengt inntil den oppgitte dagen kommer, slik det er tilfelle med virkeligheten Advent Calendar; Dørene kan ikke åpnes før den rette dagen.
Dører som allerede er aktivert, vil ha en annen grense og bakgrunnsfarge (hvit) enn de funksjonshemmede (lysegrønne). Vi vil bruke HTML5, CSS3 og JavaScript for å forberede vår adventskalender som ser noe ut som dette:
Trinn 1 - Opprett filestruktur og ressurser
Først av alt, må vi velge et fint bakgrunnsbilde. Jeg valgte en med stående orientering fra Pixabay, så kalenderen min vil inneholde 4 kolonner og 6 rader.
Det er greit hvis du foretrekker en landskapsretning. Bare endre posisjonene til dørene i JavaScript-koden, som du har 6 kolonner og 4 rader. Hvis du har bildet ditt, opprett en mappe som heter /Bilder, og lagre det.
Dette vil være vår eneste bilde ressurs for dette prosjektet.
For JavaScript-filene opprett en / scripts mappen inne i rotmappen din. Plasser to tomme tekstfiler i den, og navn dem calendar.js og messages.js. Calendar.js vil holde funksjonaliteten, mens messages.js vil inneholde en rekke meldinger som dukker opp når brukeren “åpner” (klikker på) dørene.
Vi vil også trenge en HTML og en CSS-fil, så opprett to tomme filer inne i rotmappen din og gi dem navnene index.html og style.css.
Når du er klar har du ressurser og filstruktur du trenger for å oppnå dette prosjektet, og rotmappen din ser slik ut:
Trinn 2 - Opprett HTML
HTML-koden vi bruker, er ganske enkel. CSS stilarket er koblet i
delen, mens To JavaScript-filer er inkludert i bunnen av seksjon. Sistnevnte er nødvendig, fordi hvis vi setter skriptene inn i delen, vil koden ikke bli utført, som den bruker elementene i den lastede HTML-siden.Adventskalenderen selv er plassert inne i HTML-element, og ikke som en CSS-bakgrunnsegenskap, fordi denne måten vi lett kan få tilgang til som et element i DOM.
Under bildet legger vi en tom, uordnet liste med “adventDoors” idvelger som vil bli befolket av skriptene. Hvis brukeren ikke har aktivert JavaScript i nettleseren, vil de bare se et enkelt bilde i julen.
Adventskalender Adventskalender
Trinn 3 - Populere “meldinger” Array
Vi trenger 24 juledrag for å fylle ut “meldinger” array. Jeg valgte min fra GoodReads.
Åpne scripts / messages.js fil; Vi legger anførselstegnene her for å holde dem skilt fra funksjonaliteten. De meldinger array er en matrise inne i en matrise, hvert element i den ytre matrisen inneholder en annen matrise med to elementer: et sitat og dets forfatter.
Befolk arrayet med favorittnotatene dine i henhold til følgende syntaks:
var meldinger = [["Sitat 1", "Forfatter 1"], ["Sitat 2", "Forfatter 2"], ... ["Sitat 24", "Forfatter 24"]];
Trinn 4 - Legg til grunnleggende CSS-stiler for dørene
For å skape de nødvendige CSS-stilene for dørene, må vi tenke oss på den endelige utformingen, da dørene selv vil bli opprettet med JavaScript i de følgende trinnene.
Vi må opprette 4 kolonner og 6 rader med rektangler i riktig justering. For dette vil vi bruke stilling: relativ og posisjon: absolutt CSS regler. Som den eksakte posisjonen vil endre dør for dør, vil vi legge til topp, bunn, venstre, og Ikke sant egenskaper i JavaScript, i CSS trenger vi bare å legge til en relativ posisjon til containeren (uordnet liste i HTML), og absolutte stillinger for listelementene (de vil bli lagt til i JS også).
Den andre viktige tingen i stilarkfilen er å Opprett et annet design for funksjonshemmede og de aktiverte tilstandene. De .funksjonshemmet selector vil bli lagt til deaktivert av JavaScript.
For min demokalender angir jeg en solid hvit ramme og hvite skrifter for de aktiverte dørene med en gjennomsiktig hvit bakgrunn på svinger og en lysegrønn grense, og skrifter, og en gjennomsiktig lysegrønn bakgrunn for funksjonshemmede. Hvis du ikke liker dette designet, kan du endre fargene og stilene i henhold til dine ønsker.
Plasser følgende kode (eller dine endrede stilregler) i din style.css fil.
ul # adventDoors posisjon: relative; listestil: none; polstring: 0; margin: 0; #adventDoors li posisjon: absolutt; #adventDoors li a color: #fff; bredde: 100%; høyde: 100%; skriftstørrelse: 24px; tekstjustering: center; skjerm: flex; flex-retning: kolonne; begrunn-innhold: center; tekst-dekorasjon: ingen; grense: 1px #fff solid; #adventDoors li a: not (.disabled): svever color: #fff; bakgrunnsfarge: gjennomsiktig; bakgrunnsfarge: rgba (255,255,255,0,15); #adventDoors li a.disabled border-color: # b6fe98; bakgrunnsfarge: rgba (196.254.171,0.15); farge: # b6fe98; markør: standard;
Trinn 5 - Lag de globale variablene
Fra dette trinnet vil vi bare jobbe med scripts / calendar.js fil, så nå la vi åpne dette opp. Vår Adventskalender vil bruke to globale variabler.
De myCal variabel holder kalenderbildet som et JS-objekt. Bildet er allerede lagt til i index.html filen i trinn 2. Vi legger dørene på dette bildet i trinn 7. Vi fanger den relaterte HTML-filen element merket med “adventCal” identifikator ved hjelp av getElementById () DOM-metoden. De myCal variabel vil være et HTMLImageElement DOM objekt.
De dagens dato variabel holder gjeldende dato slik at vårt skript lett kan bestemme om en dør skal aktiveres eller deaktiveres. Å lage dagens dato Vi instantierer et nytt objekt av Date JavaScript-klassen.
Sett følgende kodestykke inn i toppen av din calendar.js fil.
var myCal = document.getElementById ("adventCal"); var currentDate = ny dato (); Trinn 6 - Opprett “Dør” Klasse
Siden vi trenger 24 dører, er den enkleste måten å gjøre dette på å lage en “Dør” klasse, og senere instansiere den 24 ganger.
Dørklassen har to parametere, kalender og dag. For kalender parameter vi må passere julen bildet som vil fungere som bakgrunn. For dag parameter vi må passere dagens desember i form av et heltall.
Vi vil passere de nøyaktige verdiene til parameterne i det siste trinnet (trinn 8), under oppstart av de 24 dørobjektene.
Vi vil lage 5 egenskaper og 1 metode for Dørklassen. I dette trinnet går vi bare gjennom de 5 egenskapene, og jeg vil forklare innhold() metode i neste trinn.
De “bredde” & “høyde” eiendommer
De bredde og høyde Egenskaper beregner dynamisk bredden og høyden til hver enkelt dør (som endres i henhold til bredden og høyden til bakgrunnsbildet).
0.1 og 0.95-multiplikatorene er i ligningen for å gi noe plass til kantene, mellom hver dør og rundt sidene av kalenderen, også.
De “adventMessage” eiendom
De adventMessage Egenskapen inneholder innholdet i varselmeldingene, nemlig sitatene og de tilhørende forfatterne som vår messages.js filholder. De adventMessage eiendom tar et sitat og en forfatter fra meldinger [] array, avhengig av gjeldende dato.
For 1 desember den adventMessage Egenskapen tar det første elementet i det ytre array som er meldinger [0], som arrayer er nullbaserte i JavaScript.
Av samme grunn er sitatet for 1. desember plassert som meldinger [0] [0] (første element i det indre arrayet), og den tilsvarende forfatteren kan nås som meldinger [0] [1] (andre element i den indre gruppen).
De “x”&”y” eiendommer
Eiendommer x og y hold de riktige stillingene til hver dør som vi vil bruke i neste trinn for å sette topp og venstre CSS egenskaper. Disse vil utfylle stilling: relativ og posisjon: absolutt CSS regler som vi satt i trinn 4 for dørbeholderen (ul # adventDoors), og dørene selv (#adventDoors li). Beregningene kan virke litt skremmende, men la oss gå raskt gjennom dem.
De x eiendom vil bli brukt av venstre CSS-posisjoneringsegenskap i neste trinn (trinn 7). Det bestemmer i piksler hvor en individuell dør må plasseres på x-aksen.
Det tar bredden på bakgrunnsbildet, og det gir en liten margin for den (4%). Deretter vurderer den med resten av operatøren hvilken kolonne den skal plasseres (husk at det vil være 4 kolonner), og til slutt legger det til en liten (10%) margin for hver enkelt Dør ved å bruke en 1,1 multiplikator.
På samme måte, y eiendom vil bli brukt av topp CSS posisjoneringsegenskap, og på samme måte bestemmer den i piksler hvor en individuell dør må plasseres på y-aksen.
Vi tar høyden på bakgrunnsbildet ved hjelp av høydeegenskapen til passet kalender parameter (som har en DOM-objekt), og la en 4% -margin rundt de vertikale sidene av kalenderen.
Deretter beregner vi ved hjelp av metoden Math.floor () i hvilken rad et gitt Dørobjekt vil være (det vil være 6 rader).
Til slutt legger vi til en 10% -margin for hvert Dør-objekt ved å multiplisere høyden ved hjelp av en 1.1 multiplikator.
funksjon 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 + 'av Advent \ n \ n' + '"+ + meldinger [dag - 1] [0] +'" \ n \ n \ t '+' av '+ meldinger [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 () ...;
Trinn 7 - Populere “Innhold()” Metode
Det er den innhold() metode som viser våre dører i nettleseren. Først av alt oppretter vi en ny DOM-node ved hjelp av variabelen node som vil skape
Da dørklassen vil bli instantiated 24 ganger i en forløp i neste trinn (trinn 8), betyr dette at vi vil ha 24
Egenskapen node.id i neste linje legger til en unik idvelger for hvert listelement (dør). Vi trenger dette for å kunne klare seg gjennom dagene i neste trinn (trinn 8). På denne måten dør 1 vil ha en id =”door1", Dør 2 vil ha en id =”door2" velger osv.
Egenskapen node.style.cssText i neste linje legger til noen CSS-regler for hvert listelement (dør) ved hjelp av style =”... ” HTML-attributt som brukes til å inkludere inline CSS i HTML-filer. De node.style.cssText eiendom bruker egenskapene til dørklassen som vi satt i forrige trinn (trinn 6).
For å gjøre vårt Dørobjekt klikkbart, må vi også legge til en tag inne listelementene. Vi oppnår dette ved hjelp av innerNode variabel som vi binder som et barnelement til riktig listeelement identifisert av id =”Døren [i]” selector (med [i] er dagnummeret), ved å bruke appendChild () DOM-metoden akkurat som før.
Egenskapen innerHTML i neste linje viser dagens dag (1-24) på toppen av døren i nettleseren, og vi legger også til en href =”#” Tilordne våre ankerkoder ved hjelp av href DOM-egenskapen.
Til slutt, i if-else-setningen, vurderer vi om et Dørobjekt skal aktiveres eller deaktiveres. Først undersøker vi om vi er i 12. måned på året (desember) ved å bruke metoden getMonth () i Date-objektet. Vi må legge til 1, fordi getMonth () er nullbasert (januar er måned 0, etc.).
Etter dette kontrollerer vi om gjeldende dato i dagens dato global variabel vi satt i trinn 5 er mindre enn dag som gjeldende Dørobjekt representerer.
Hvis det ikke er desember eller dagen som er representert av den angitte døren, er større enn den nåværende datoen, bør døren deaktiveres, i andre tilfeller må den aktiveres slik at brukerne kan klikke på den og se den tilhørende Advent-meldingen.
Hvis døren er deaktivert, legger vi til en class =”funksjonshemmet” velg til den angitte ankermerket ved hjelp av className-egenskapen. Husk at vi allerede har stylet .funksjonshemmet klasse med CSS i trinn 4. Vi må også sette onclick HTML-hendelsesattributtet for å returnere falskt.
Hvis døren er i aktivert tilstand, legger vi til adventMessage eiendom til en varselmelding, og plasser den inne i attributten onclick HTML-hendelsen.
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øyde:" + this.height + "px; topp:" + this.y + "px; left:" + 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; ; Trinn 8 - Initialiser “Dør” objekter
Til slutt må vi initialisere dørklassen 24 ganger.
For å gjøre dette bruker vi en Umiddelbart bekreftet funksjonsuttrykk som er ganske nyttig her, fordi vi ikke trenger en variabel som vi bare vil utføre koden inne i funksjonen en gang.
Vi lager en dører [] array som vil holde 24 Dørobjektene. Vi går gjennom dagene fra 1 til 24 (de vil være 0-23 elementene i dørene [] array, da arrayer er nullbaserte) og til slutt returnerer hele dører [] array inkludert de 24 dørobjektene for å vise dem i nettleseren.
(funksjon () vardører = []; for (var i = 0; i < 24; i++) doors[i] = new Door(myCal, i + 1); doors[i].content(); return doors; )();
- Demo
- Last ned kilde
