Så här bygger du en enkel adventskalender i JavaScript
Advent är väntetiden och förbereder till jul som börjar fyra söndagar före julafton. Förgången till Advent-tiden mäts traditionellt med hjälp av antingen Advent Calendar eller Advent Wreath. Även om Adventens början inte är ett fast datum, börjar Advent Calendars vanligtvis den 1 december.
På grundval av lokala tullar kan Adventkalendrar ha olika utformningar, men oftast tar de form av stora rektangulära kort med 24 fönster eller dörrar markerar dagarna mellan 1 och 24 december. Dörrarna gömmer meddelanden, dikter, böner eller små överraskningar.
I det här inlägget ska jag visa dig hur du ska skapa en adventskalender i objektorienterad JavaScript. Som det är gjord i vanilj JavaScript kan du enkelt placera koden på din egen hemsida.
- demo
- Hämta källa
JavaScript Kalender Design
Vår Adventskalender kommer att ha 24 dörrar på en jul-tema bakgrundsbild. Varje dörr kommer att gömma en julrelaterad offert som kommer att dyker upp i form av ett varningsmeddelande när användaren klickar på dörren. Dörren förblir stängda tills den angivna dagen kommer, som det är fallet med det verkliga livet Advent Calendar; dörrarna kan inte öppnas före rätt dag.
Dörrar som redan är aktiverade kommer att ha en annan gräns och bakgrundsfärg (vit) än de funktionshindrade (ljusgrön). Vi kommer att använda HTML5, CSS3 och JavaScript för att förbereda vår Advent Calendar som ser något ut så här:
Steg 1 - Skapa filstruktur och resurser
Först av allt måste vi välja en fin bakgrundsbild. Jag valde en med stående orientering från Pixabay, så min kalender kommer att innehålla 4 kolumner och 6 rader.
Det är bra om du föredrar en landskapsorientering. Ändra bara dörrarna i JavaScript-koden, som du får 6 kolumner och 4 rader. Om du har din bild, skapa en mapp som heter /bilder, och spara det.
Detta blir vår enda bildresurs för detta projekt.
För JavaScript-filerna skapa en / script mappen i din rotmapp. Placera två tomma textfiler i den och namnge dem calendar.js och messages.js. Calendar.js kommer att hålla funktionaliteten, medan messages.js kommer att innehålla en rad meddelanden som dyker upp när användaren “öppnar” (klickar på) dörrarna.
Vi behöver också en HTML- och en CSS-fil, så skapa två tomma filer i din rotmapp och ge dem namnen index.html och style.css.
När du är redo har du resurser och filstruktur du behöver för att uppnå detta projekt, och din rotmapp ser något ut så här ut:
Steg 2 - Skapa HTML
HTML-koden vi använder är ganska enkel. CSS stilarket är länkat i
avsnitt, medan två JavaScript-filer ingår i botten av sektion. Det senare är nödvändigt, för om vi sätter in skripten i sektionen, skulle koden inte utföras, som den använder elementen i den laddade HTML-sidan.Adventskalendern själv är placerad inuti HTML-element, och inte som en CSS-bakgrundsegenskap, för det här sättet kan vi enkelt komma åt det som ett element i DOM.
Nedanför bilden lägger vi en tom oorderad lista med “adventDoors” id väljare som kommer att fyllas av skript. Om användaren inte har aktiverat JavaScript i sin webbläsare, så kommer de bara att se en enkel julbild.
Adventskalender Adventskalender
Steg 3 - Populera “meddelanden” Array
Vi behöver 24 julkurser att fylla i “meddelanden” array. Jag valde min från GoodReads.
Öppna scripts / messages.js fil; Vi lägger citaten här för att hålla dem skilda från funktionaliteten. De meddelanden array är en array i en array, varje element i den yttre gruppen innehåller en annan grupp med två element: ett citat och dess författare.
Fyll i arrayen med dina favorit citat enligt följande syntax:
var messages = [["Citat 1", "Författare 1"], ["Citat 2", "Författare 2"], ... ["Citat 24", "Författare 24"]];
Steg 4 - Lägg till grundläggande CSS-stilar för dörrarna
För att skapa nödvändiga CSS-stilar för dörrarna måste vi föreställa oss den slutliga designen, eftersom dörrarna själva kommer att skapas med JavaScript i följande steg.
Vi behöver skapa 4 kolumner och 6 rader av rektanglar i korrekt inriktning. För detta kommer vi att använda position: relativ och den position: absolut CSS regler. Eftersom den exakta positionen kommer att ändra dörr för dörr, lägger vi till topp, botten, vänster, och höger egenskaper i JavaScript, i CSS behöver vi bara lägga till en relativ position till behållaren (oordnad lista i HTML) och absoluta positioner för listelementen (de kommer också att läggas till i JS).
Den andra viktiga saken i stylesheet-filen är att skapa en annan design för funktionshindrade och de aktiverade tillstånden. De .Inaktiverad väljaren kommer att läggas till funktionshindrade av JavaScript.
För min demokalender ställer jag en solid vit ram och vita teckensnitt för de aktiverade dörrarna med en genomskinlig vit bakgrund på sväva; och en ljusgrön gräns och teckensnitt och en genomskinlig ljusgrön bakgrund för funktionshindrade. Om du inte gillar den här designen kan du ändra färger och stilar efter önskemål.
Placera följande kod (eller dina ändrade stilregler) i din style.css fil.
ul # adventDoors position: relative; listestil: none; vaddering: 0; marginal: 0; #adventDoors li position: absolute; #adventDoors li a color: #fff; bredd: 100%; höjd: 100%; fontstorlek: 24px; text-align: center; display: flex; flex-riktning: kolumn; rättfärdiga innehåll: center; text-dekoration: ingen; gränsen: 1px #fff solid; #adventDoors li a: not (.disabled): svävar färg: #fff; bakgrundsfärg: transparent; bakgrundsfärg: rgba (255,255,255,0,15); #adventDoors li a.disabled border-color: # b6fe98; bakgrundsfärg: rgba (196.254.171,0.15); färg: # b6fe98; markör: default;
Steg 5 - Skapa globala variabler
Från det här steget kommer vi bara att arbeta med scripts / calendar.js fil, så nu låt oss öppna detta. Vår Adventskalender kommer att använda två globala variabler.
De myCal variabel håller kalenderbilden som ett JS-objekt. Bilden har redan lagts till i index.html filen i steg 2. Vi kommer att placera dörrarna på den här bilden i steg 7. Vi tar tag i den relaterade HTML-filen element markerat med “adventCal” identifieraren med hjälp av getElementById () DOM-metoden. De myCal variabel kommer att vara ett HTMLImageElement DOM-objekt.
De dagens datum variabel håller det aktuella datumet så att vårt skript enkelt kan bestämma om en dörr ska vara aktiverad eller inaktiverad. Att skapa dagens datum vi instanserar ett nytt objekt av Date JavaScript-klassen.
Lägg följande kodbit i toppen av din calendar.js fil.
var myCal = document.getElementById ("adventCal"); var currentDate = nytt datum (); Steg 6 - Skapa “Dörr” Klass
Eftersom vi behöver 24 dörrar är det enklaste sättet att göra det här att skapa en “Dörr” klass, och senare instansera den 24 gånger.
Vår dörrklass har två parametrar, kalender och dag. För kalender parameter måste vi passera julbilden som kommer att fungera som bakgrund. För dag parametern måste vi passera dagens december i form av ett heltal.
Vi kommer att passera parametrarnas exakta värden i det sista steget (Steg 8), under instansering av 24 Dörrobjekten.
Vi kommer att göra 5 egenskaper och 1 metod för Dörklassen. I detta steg går vi bara igenom de 5 egenskaperna, och jag kommer att förklara innehåll() metod i nästa steg.
De “bredd” & “höjd” egenskaper
De bredd och höjd Egenskaper beräknar dynamiskt bredden och höjden på varje enskild dörr (som ändras beroende på bakgrundsbildens bredd och höjd).
0.1 och 0.95 multiplikatorerna är i ekvationen för att lämna utrymme för marginalerna, mellan varje dörr och runt kalenderns sidor, också.
De “adventMessage” fast egendom
De adventMessage egendom håller innehållet i varningsmeddelandena, nämligen citat och matchande författare som vår messages.js filinnehåll. De adventMessage egendom tar ett citat och en författare från meddelanden [] array, beroende på aktuellt datum.
För 1 december den adventMessage egenskapen tar det första elementet i den yttre matrisen som är meddelanden [0], som arrays är nollbaserade i JavaScript.
Av samma anledning är citatet för 1 dec placerat som meddelanden [0] [0] (första elementet i den inre gruppen), och matchande författaren kan nås som meddelanden [0] [1] (andra elementet i den inre gruppen).
De “x”&”y” egenskaper
Egenskaper x och y håll rätt positioner för varje dörr som vi kommer att använda i nästa steg för att ställa in topp och vänster CSS egenskaper. Dessa kommer att komplettera position: relativ och position: absolut CSS regler som vi satt i steg 4 för dörrbehållaren (ul # adventDoors) och dörrarna själva (#adventDoors li). Beräkningarna kan verka något skrämmande, men låt oss gå snabbt igenom dem.
De x egendom kommer att användas av vänster CSS positioneringsegenskap i nästa steg (steg 7). Det bestämmer i pixlar där en individuell dörr måste placeras på x-axeln.
Det tar bredden på bakgrundsbilden, och den lämnar en liten marginal för den (4%). Sedan med hjälp av återstående operatör bedömer den i vilken kolumn den kommer att placeras (kom ihåg att det kommer att finnas 4 kolumner) och till sist lägger det till en liten (10%) marginal för varje enskild dörr med hjälp av en 1,1 multiplikator.
På samma sätt, y egendom kommer att användas av topp CSS-positioneringsegenskapen och bestämmer likaledes i pixlar där en individuell dörr måste placeras på y-axeln.
Vi tar höjden av bakgrundsbilden med hjälp av höjdsegenskapen hos den passerade in kalender parameter (som innehåller ett DOM-objekt) och lämna en 4% -marginal runt de vertikala sidorna av kalendern.
Sedan beräknar vi med hjälp av metoden Math.floor () i vilken rad ett givet dörrobjekt kommer att vara (det kommer att finnas 6 rader).
Slutligen lägger vi till en 10% -marginal för varje Dörobjekt genom att multiplicera dess höjd med en 1,1 multiplikator.
funktion Dörr (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' + '"+ + meddelanden [dag - 1] [0] +'" \ n \ n \ t '+' av '+ meddelanden [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 () ...;
Steg 7 - Populera “Innehåll()” Metod
Det är innehåll() metod som visar våra dörrar i webbläsaren. Först och främst skapar vi en ny DOM-nod med hjälp av variabeln nod som kommer att skapa
Eftersom dörrklassen kommer att instantieras 24 gånger i en för loop i nästa steg (steg 8) betyder det att vi kommer att ha 24
Egenskapen node.id i nästa rad lägger till en unik ID-väljare för varje listelement (dörr). Vi behöver detta för att kunna ordentligt gå igenom dagarna i nästa steg (steg 8). På så sätt Dörr 1 kommer att ha en id =”door1", Dörr 2 kommer att ha en id =”door2" väljare osv.
Egenskapen node.style.cssText i nästa rad lägger till några CSS-regler för varje listelement (dörr) med hjälp av style =”... ” HTML-attribut som används för att inkludera inline CSS i HTML-filer. De node.style.cssText egendom använder egenskaperna hos dörrklassen som vi satt i föregående steg (steg 6).
För att göra vårt dörrobjekt klickbart måste vi också lägga till en tagga in i listelementen. Vi uppnår detta med hjälp av innerNode variabel som vi binder som ett barnelement till lämpligt listelement som identifierats av id =”dörr [i]” väljaren (med [i] som dagnumret), med hjälp av appendChild () DOM-metoden precis som tidigare.
Egenskapen innerHTML i nästa rad visar dagens dag (1-24) ovanför dörren i webbläsaren, och vi lägger också till en href =”#” attribut till våra ankare-taggar med hjälp av href DOM-egenskapen.
Slutligen, i if-else-satsen utvärderar vi om ett dörrobjekt ska vara aktiverat eller inaktiverat. Först undersöker vi om vi är i årets 12: e månad (december) genom att använda metoden getMonth () i Date-objektet. Vi måste lägga till 1, eftersom getMonth () är nollbaserad (januari är månad 0, etc.).
Därefter kontrollerar vi om det aktuella datumet hålls i dagens datum global variabel vi satt i steg 5 är mindre än dag som det nuvarande Dörrobjektet representerar.
Om det inte är december eller den dag som representeras av den angivna dörren är större än det aktuella datumet, ska dörren vara inaktiverat, i alla andra fall måste det aktiveras så att användarna kan klicka på det och se det relaterade Advent-meddelandet.
Om dörren är inaktiverad lägger vi till en class =”Inaktiverad” väljaren till den angivna ankerkoden med hjälp av egenskapen className. Kom ihåg att vi redan har stylat .Inaktiverad klass med CSS i steg 4. Vi måste också ställa in attributet onclick HTML-händelse för att returnera falskt.
Om dörren är i aktiverat tillstånd lägger vi till adventMessage egenskap till ett varningsmeddelande och placera det i attributet onclick HTML-händelse.
this.content = function () var node = document.createElement ("li"); document.getElementById ( "adventDoors") appendChild (nod).; node.id = "dörr" + dag; node.style.cssText = "width:" + this.width + "px; höjd:" + this.height + "px; topp:" + this.y + "px; vänster:" + this.x + "px ; "; var innerNode = document.createElement ("a"); document.getElementById ("dörr" + dag) .appendChild (innerNode); innerNode.innerHTML = dag; innerNode.href = "#"; om ((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; ; Steg 8 - Initiera “Dörr” Objekt
Slutligen måste vi initiera dörrklassen 24 gånger.
För att göra det använder vi en direkt uttryckt funktionsuttryck som är ganska användbar här, eftersom vi inte behöver en variabel eftersom vi bara vill köra koden inuti funktionen en gång.
Vi skapar en dörrar [] array som håller 24 dörrobjekt. Vi går igenom dagarna från 1 till 24 (de kommer att vara 0-23: e elementen i dörren [] -uppsättningen, eftersom arrays är nollbaserade) och äntligen återvänder hela dörrar [] array inklusive 24 Dörr objekt att visa dem i webbläsaren.
(funktion () var dörrar = []; för (var i = 0; i < 24; i++) doors[i] = new Door(myCal, i + 1); doors[i].content(); return doors; )();
- demo
- Hämta källa
