Hoe maak je een Simple Advent-kalender in JavaScript
De Advent is de periode van wachten en voorbereiden op Kerstmis die vier zondagen vóór de vooravond van Kerstmis begint. Het verstrijken van de Adventtijd wordt traditioneel gemeten met behulp van een adventskalender of een adventskrans. Hoewel het begin van Advent geen vaste datum is, beginnen adventskalenders gewoonlijk op 1 december.
Op basis van lokale gebruiken kunnen Advent-kalenders verschillende ontwerpen hebben, maar meestal hebben ze de vorm van grote rechthoekige kaarten met 24 ramen of deuren de dagen markeren tussen 1 en 24 december. De deuren verbergen berichten, gedichten, gebeden of kleine verrassingen.
In deze post zal ik je laten zien hoe maak een adventskalender in object-georiënteerd JavaScript. Omdat het is gemaakt in vanilla JavaScript, kunt u de code gemakkelijk in uw eigen website plaatsen.
- demonstratie
- Download de bron
JavaScript-kalender ontwerpen
Onze adventskalender heeft 24 deuren met een achtergrondafbeelding met een kerstthema. Elke deur verbergt een kerstgerelateerde quote die dat wel zal doen verschijnt in de vorm van een waarschuwingsbericht wanneer de gebruiker op de deur klikt. De deuren blijven gesloten tot de aangegeven dag, zoals het geval is met de adventskalender uit het echte leven; de deuren kunnen niet voor de juiste dag worden geopend.
Deuren die al zijn ingeschakeld, hebben een andere rand en achtergrondkleur (wit) dan de uitgeschakelde (lichtgroen). We zullen HTML5, CSS3 en JavaScript gebruiken om onze adventskalender voor te bereiden die er ongeveer zo uitziet:
Stap 1 - Maak bestandsstructuur en bronnen
Allereerst moeten we een mooie achtergrondafbeelding kiezen. Ik heb er een met portretoriëntatie gekozen op Pixabay, dus mijn agenda bevat 4 kolommen en 6 rijen.
Het is prima als je de voorkeur geeft aan een liggende oriëntatie. Verander gewoon de posities van de deuren in de JavaScript-code, zoals u zult hebben 6 kolommen en 4 rijen. Als u uw afbeelding hebt, maakt u een map met de naam /afbeeldingen, en bewaar het.
Dit is onze enige beeldbron voor dit project.
Maak voor de JavaScript-bestanden een / scripts map in uw hoofdmap. Plaats er twee lege tekstbestanden in en noem ze calendar.js en messages.js. Calendar.js zal de functionaliteit behouden, terwijl messages.js bevat de reeks berichten die verschijnt als de gebruiker “opent” (klikt op) de deuren.
We hebben ook een HTML- en een CSS-bestand nodig, dus maak twee lege bestanden in je hoofdmap en geef ze de namen index.html en style.css.
Wanneer je klaar bent, heb je de bronnen en bestandsstructuur die je nodig hebt om dit project te voltooien, en je rootmap ziet er ongeveer zo uit:
Stap 2 - Maak de HTML
De HTML-code die we gebruiken is vrij eenvoudig. Het CSS-stylesheet is gekoppeld in de
sectie, terwijl de twee JavaScript-bestanden zijn opgenomen in de onderkant van de sectie. Dit laatste is nodig, want als we de scripts in de sectie, de code zou niet worden uitgevoerd, zoals het gebruikt de elementen van de geladen HTML-pagina.De adventskalender zelf wordt in de HTML-element en niet als een CSS-achtergrondeigenschap, omdat we op deze manier eenvoudig toegang hebben tot het element als onderdeel van de DOM.
Onder de afbeelding plaatsen we een lege ongeordende lijst met de “adventDoors” id selector die wordt gevuld met de scripts. Als de gebruiker JavaScript niet heeft ingeschakeld in zijn browser, ziet hij een eenvoudige kerstafbeelding.
Advent kalender Advent kalender
Stap 3 - Vul het “berichten” reeks
We hebben 24 kerstcitaten nodig om de “berichten” matrix. Ik koos de mijne van GoodReads.
Open de scripts / messages.js het dossier; we plaatsen de aanhalingstekens hier om ze gescheiden te houden van de functionaliteit. De berichten array is een array binnen een array, elk element van de outer array bevat een andere array met twee elementen: een citaat en de auteur ervan.
Vul de array met uw favoriete aanhalingstekens volgens de volgende syntaxis:
var messages = [["Quote 1", "Author 1"], ["Quote 2", "Author 2"], ... ["Quote 24", "Author 24"]];
Stap 4 - Voeg basis CSS-stijlen toe voor de deuren
Om de noodzakelijke CSS-stijlen voor de deuren te maken, moeten we ons het definitieve ontwerp voorstellen, omdat de deuren zelf met JavaScript worden gemaakt in de volgende stappen.
We moeten 4 kolommen en 6 rijen rechthoeken maken in de juiste uitlijning. Hiervoor gebruiken we de positie: relatief en de positie: absoluut CSS-regels. Omdat de exacte positie van deur tot deur verandert, voegen we de top, bodem, links, en rechts eigenschappen in het JavaScript, in de CSS hoeven we alleen maar een relatieve positie aan de container toe te voegen (ongeordende lijst in de HTML) en absolute posities voor de lijstelementen (deze zullen ook in de JS worden toegevoegd).
Het andere belangrijke in het stylesheetbestand is om maak een ander ontwerp voor gehandicapten en de ingeschakelde staten. De .invalide selector wordt door JavaScript aan de functie uitgeschakeld.
Voor mijn demalalender heb ik een effen witte rand en witte lettertypen ingesteld voor de ingeschakelde deuren met een transparante witte achtergrond bij zweven; en een lichtgroene rand en lettertypen en een transparante lichtgroene achtergrond voor mensen met een handicap. Als je dit ontwerp niet leuk vindt, kun je de kleuren en stijlen naar wens aanpassen.
Plaats de volgende code (of uw aangepaste stijlregels) in uw style.css het dossier.
ul # adventDoors positie: relatief; lijststijl: geen; opvulling: 0; marge: 0; #adventDoors li position: absolute; #adventDoors li a color: #fff; breedte: 100%; hoogte: 100%; tekengrootte: 24 px; text-align: center; weergave: flex; flex-richting: kolom; justify-content: center; tekstdecoratie: geen; border: 1px #fff solid; #adventDoors li a: not (.disabled): hover color: #fff; achtergrondkleur: transparant; achtergrondkleur: rgba (255,255,255,0,15); #adventDoors li a.disabled border-colour: # b6fe98; achtergrondkleur: rgba (196,254,171,0,15); kleur: # b6fe98; cursor: standaard;
Stap 5 - Maak de globale variabelen
Vanaf deze stap werken we alleen met de scripts / calendar.js bestand, dus laten we dit nu openen. Onze adventskalender gebruikt twee globale variabelen.
De myCal variabele houdt de kalenderafbeelding vast als een JS-object. De afbeelding is al toegevoegd aan de index.html bestand in stap 2. We zullen de deuren op deze afbeelding plaatsen in stap 7. We leggen de gerelateerde HTML vast element gemarkeerd met de “adventCal” ID door de getElementById () DOM-methode te gebruiken. De myCal variabele zal een HTMLImageElement-DOM-object zijn.
De huidige datum variabele bevat de huidige datum, zodat ons script gemakkelijk kan beslissen of een deur moet worden ingeschakeld of uitgeschakeld. Maken huidige datum we instantiëren een nieuw object van de klasse Date JavaScript.
Plaats het volgende codefragment boven aan uw calendar.js het dossier.
var myCal = document.getElementById ("adventCal"); var currentDate = nieuwe datum (); Stap 6 - Maak het “Deur” Klasse
Omdat we 24 deuren nodig hebben, is de meest eenvoudige manier om dit te doen het maken van een “Deur” klasse, en later 24 keer instantiëren.
Onze deurklasse heeft twee parameters, kalender en dag. Voor de kalender parameter moeten we de kerstafbeelding doorgeven die als achtergrond zal fungeren. Voor de dag parameter moeten we de huidige dag van december doorgeven in de vorm van een geheel getal.
We zullen de exacte waarden van de parameters doorgeven in de laatste stap (stap 8), tijdens de instantiatie van de 24 Door-objecten.
We maken 5 eigenschappen en 1 methode voor de klasse Deur. In deze stap zullen we alleen de 5 eigenschappen doornemen, en ik zal de inhoud() methode in de volgende stap.
De “breedte” & “hoogte” eigenschappen
De breedte en hoogte eigenschappen berekenen dynamisch de breedte en hoogte van elke individuele deur (die verandert in overeenstemming met de breedte en hoogte van de achtergrondafbeelding).
De 0,1 en 0,95 vermenigvuldigers staan in de vergelijking om ruimte te laten voor de marges, tussen elke deur en ook rond de zijkanten van de kalender.
De “adventMessage” eigendom
De adventMessage eigenschap bevat de inhoud van de waarschuwingsberichten, namelijk de aanhalingstekens en de overeenkomende auteurs die onze messages.js bestand houdt. De adventMessage bezit neemt een citaat en een auteur van de messages [] matrix, afhankelijk van de huidige datum.
Voor 1 december het adventMessage eigenschap neemt het eerste element van de buitenste array dat is messages [0], omdat arrays op nul gebaseerd zijn in JavaScript.
Om dezelfde reden is het citaat voor 1 december gepositioneerd als messages [0] [0] (eerste element van de innerlijke array), en de overeenkomende auteur kan worden bereikt als messages [0] [1] (tweede element van de binnenste array).
De “X”&”Y” eigenschappen
eigenschappen X en Y houd de juiste posities van elke deur vast die we zullen gebruiken in de volgende stap om de top en links CSS-eigenschappen. Deze zullen de positie: relatief en positie: absoluut CSS-regels die we in stap 4 voor de deurcontainer instellen (ul # adventDoors) en de deuren zelf (#adventDoors li). De berekeningen lijken misschien wat intimiderend, maar laten we er snel doorheen gaan.
De X eigendom wordt gebruikt door de links CSS-positioneringseigenschap in de volgende stap (stap 7). Het bepaalt in pixels waar een individuele deur op de x-as moet worden geplaatst.
Het neemt de breedte van de achtergrondafbeelding in beslag en laat er een kleine marge over (4%). Vervolgens wordt met behulp van de restoperator bepaald in welke kolom deze wordt geplaatst (onthoud dat er 4 kolommen zijn) en tenslotte voegt het een kleine (10%) marge toe aan elke afzonderlijke deur door een 1.1-vermenigvuldiger te gebruiken.
Op dezelfde manier, de Y eigendom wordt gebruikt door de top CSS positioneringseigenschap, en het bepaalt eveneens in pixels waar een individuele deur op de y-as moet worden geplaatst.
We nemen de hoogte van de achtergrondafbeelding met behulp van de eigenschap height van de doorgegeven waarde kalender parameter (die een DOM-object bevat) en laat een marge van 4% rond de verticale zijden van de Agenda.
Vervolgens berekenen we met behulp van de Math.floor () -methode in welke rij een bepaald Door-object zal zijn (er zullen 6 rijen zijn).
Ten slotte voegen we een marge van 10% toe voor elk object Deur door de hoogte te vermenigvuldigen met een 1.1-vermenigvuldiger.
function Door (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 + 'van Advent \ n \ n' + '"' + berichten [dag - 1] [0] + '" \ n \ n \ t' + 'bij' + berichten [dag - 1] [1] + '\ n \ n'; this.x = (0.04 * calendar.width + ((day - 1)% 4) * (1.1 * this.width)); this.y = - (0.96 * calendar.height - Math.floor ((day - 1) / 4) * (1.1 * this.height)); this.content = function () ...;
Stap 7 - Vul het “Inhoud()” Methode
Het is de inhoud() methode die onze deuren in de browser toont. Allereerst creëren we een nieuw DOM-knooppunt met behulp van de variabele knooppunt dat zal de
Omdat de klasse Door 24 keer in een for-lus wordt geïnstantieerd in de volgende stap (stap 8), betekent dit dat we 24
De eigenschap node.id op de volgende regel voegt een unieke id-selector toe aan elk lijstelement (deur). We zullen dit nodig hebben om de dagen in de volgende stap goed door te kunnen lopen (stap 8). Op deze manier heeft Deur 1 een id =”door1", Deur 2 heeft een id =”door2" selector, enz.
De eigenschap node.style.cssText op de volgende regel voegt een aantal CSS-regels toe aan elk lijstelement (deur) met behulp van de style =”... ” HTML-kenmerk dat wordt gebruikt om inline CSS in HTML-bestanden op te nemen. De node.style.cssText property gebruikt de eigenschappen van de klasse Door die we in de vorige stap hebben ingesteld (stap 6).
Om ons Door-object klikbaar te maken, moeten we ook een toevoegen tag in de lijstelementen. We bereiken dit met behulp van de innerNode variabele die we als een kindelement binden aan het juiste lijstelement geïdentificeerd door de id =”deur [i]” selector (waarbij [i] het dagnummer is), met behulp van de appendChild () DOM-methode, net als hiervoor.
De eigenschap innerHTML in de volgende regel geeft de huidige dag (1-24) boven aan de deur in de browser weer en we voegen ook een href =”#” attribuut aan onze ankertags door middel van de eigenschap href DOM.
Ten slotte evalueren we in de if-else-instructie of een Deur-object moet worden ingeschakeld of uitgeschakeld. Eerst onderzoeken we of we in de 12e maand van het jaar (december) zijn door de methode getMonth () van het object Date te gebruiken. We moeten 1 toevoegen, omdat getMonth () gebaseerd is op nul (januari is maand 0, etc.).
Hierna controleren we of de huidige datum in de huidige datum globale variabele die we instellen in stap 5 is minder dan de dag dat het huidige Door-object representeert.
Als het niet december is, of als de dag die wordt weergegeven door de opgegeven deur groter is dan de huidige datum, moet de deur worden uitgeschakeld, in alle andere gevallen moet deze worden ingeschakeld zodat gebruikers erop kunnen klikken en het bijbehorende adventsbericht kunnen zien.
Als de deur is uitgeschakeld, voegen we een toe class =”invalide” selector naar de gegeven ankertag met behulp van de eigenschap className. Denk eraan, we hebben het .invalide klasse met CSS in stap 4. We moeten ook het Onclick HTML-eventkenmerk instellen om false te retourneren.
Als de deur is ingeschakeld, voegen we de adventMessage eigenschap naar een waarschuwingsbericht en plaats deze in het onclick HTML-eventkenmerk.
this.content = function () var node = document.createElement ("li"); document.getElementById ( "adventDoors") appendChild (knooppunt).; node.id = "deur" + dag; node.style.cssText = "width:" + this.width + "px; height:" + this.height + "px; top:" + this.y + "px; left:" + this.x + "px "; var innerNode = document.createElement ("a"); document.getElementById ("deur" + dag) .appendChild (innerNode); innerNode.innerHTML = dag; innerNode.href = "#"; if ((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; ; Stap 8 - Initialiseer de “Deur” Voorwerpen
Ten slotte moeten we de deurklasse 24 keer initialiseren.
Om dit te doen, gebruiken we een onmiddellijk opgeroepen functie-expressie die hier heel handig is, omdat we geen variabele nodig hebben, omdat we de code binnen de functie slechts één keer willen uitvoeren.
We creëren een deuren [] array die de 24 Door-objecten zal bevatten. We doorlopen de dagen van 1 tot 24 (ze worden de 0-23e elementen van de array [], omdat arrays op nul zijn gebaseerd) en retourneren uiteindelijk de hele reeks deuren [] array inclusief de 24 Door-objecten om ze in de browser weer te geven.
(function () var doors = []; for (var i = 0; i < 24; i++) doors[i] = new Door(myCal, i + 1); doors[i].content(); return doors; )();
- demonstratie
- Download de bron
