Jak vytvořit jednoduchý adventní kalendář v JavaScriptu
Advent je doba čekání a přípravy na Vánoce, která začíná čtyři neděle před Štědrým večerem. Přechod adventního času se tradičně měří pomocí adventního kalendáře nebo adventního věnce. Ačkoli začátek Adventu není pevným datem, adventní kalendáře obvykle začínají 1. prosince.
Adventní kalendáře mohou mít na základě místních zvyklostí různé vzory, ale nejčastěji mají podobu velké obdélníkové karty s 24 okny nebo dveřmi značení dnů mezi 1. a 24. dnem. Dveře skrývají zprávy, básně, modlitby nebo malá překvapení.
V tomto příspěvku vám ukážu, jak na to vytvořit adventní kalendář v objektově orientovaném JavaScriptu. Jak je to v vanilce JavaScript, můžete snadno umístit kód na své vlastní webové stránky.
- Demo
- Stáhněte si zdroj
JavaScript Kalendář Design
Náš Adventní kalendář bude mít 24 dveří na pozadí s motivem Vánoc. Každé dveře skryjí vánoční citát, který bude Když uživatel klikne na dveře, zobrazí se ve formě výstražné zprávy. Dveře zůstanou zavřené, dokud nenastane den, jak je tomu v případě skutečného adventního kalendáře; dveře nelze otevřít před správným dnem.
Dveře, které jsou již povoleny, budou mít jinou hranici a barvu pozadí (bílá) než ty, které jsou zakázány (lightgreen). Pro přípravu Adventního kalendáře použijeme HTML5, CSS3 a JavaScript:
Krok 1 - Vytvoření struktury souborů a zdrojů
Nejdříve si musíme vybrat pěkný obrázek na pozadí. Vybral jsem si jeden s orientací na výšku od Pixabay, takže můj kalendář bude obsahovat 4 sloupce a 6 řádků.
Je to dobré, pokud dáváte přednost orientaci na šířku. Stačí změnit pozice dveří v kódu JavaScript, jak budete mít 6 sloupců a 4 řádky. Pokud máte obrázek, vytvořte složku s názvem /snímky, a uložte ji.
Bude to náš jediný obrazový zdroj pro tento projekt.
Pro soubory JavaScript vytvořte / skripty složky v kořenové složce. Vložte do něj dva prázdné textové soubory a pojmenujte je calendar.js a messages.js. Calendar.js bude mít funkci, zatímco messages.js bude obsahovat pole zpráv, které se objeví, když uživatel “otevře” (klikne) na dveře.
Budeme také potřebovat HTML a CSS soubor, takže vytvořte dva prázdné soubory uvnitř kořenové složky a dejte jim jména index.html a style.css.
Když jste připraveni, máte k dispozici prostředky a strukturu souborů, které budete potřebovat k provedení tohoto projektu, a vaše kořenová složka vypadá takto:
Krok 2 - Vytvoření HTML
HTML kód, který používáme, je velmi přímočarý. Šablona stylů CSS je propojena v
sekce, zatímco dva soubory JavaScript jsou zahrnuty v dolní části sekce. Ten je nutný, protože pokud vložíme skripty do sekce, kód by nebyl proveden, jako by používá prvky načtené stránky HTML.Samotný Adventní kalendář je umístěn uvnitř HTML element, a ne jako CSS pozadí vlastnost, protože tímto způsobem můžeme snadno přistupovat k němu jako prvek DOM.
Pod obrázkem umístíme prázdný neuspořádaný seznam “adventDoors” id selector, který bude naplněn skripty. Pokud uživatel nemá ve svém prohlížeči povolen JavaScript, uvidí pouze jednoduchý vánoční obrázek.
Adventní kalendář Adventní kalendář
Krok 3 - Naplňte “Zprávy” Array
Potřebujeme 24 vánočních citací k naplnění “zpráv” pole. Vybral jsem si z GoodReads.
Otevři skripty / messages.js soubor; umístíme zde citace, aby byly zachovány odděleně od funkčnosti. zpráv array je pole uvnitř pole, každý prvek vnějšího pole obsahuje další pole se dvěma prvky: citací a jeho autorem.
Naplňte pole svými oblíbenými uvozovkami podle následující syntaxe:
var messages = [["Citace 1", "Autor 1"], ["Citace 2", "Autor 2"],… ["Citace 24", "Autor 24"]];
Krok 4 - Přidejte základní styly CSS pro dveře
Pro vytvoření potřebných CSS stylů pro dveře si musíme představit finální design, protože dveře budou vytvořeny pomocí JavaScriptu v následujících krocích..
Potřebujeme vytvořit 4 sloupce a 6 řádků obdélníků ve správném zarovnání. K tomu použijeme poloha: relativní a pozice: absolutní CSS pravidla. Vzhledem k tomu, že přesná poloha změní dveře dveřmi, přidáme horní, dno, vlevo, odjet, a že jo vlastnosti v JavaScriptu, v CSS stačí přidat relativní pozici do kontejneru (neuspořádaný seznam v HTML) a absolutní pozice pro elementy seznamu (budou také přidány do JS).
Další důležitou věcí v souboru stylů je vytvořit jiný design pro postižené a povolené stavy. .zakázáno selektor bude přidán k zakázanému JavaScriptu.
Pro můj demo Kalendář jsem nastavil pevné bílé ohraničení a bílá písma pro povolené dveře s průhledným bílým pozadím na vznášející se; a světle zelené ohraničení a písma a průhledné světle zelené pozadí pro osoby se zdravotním postižením. Pokud se vám tento návrh nelíbí, můžete změnit barvy a styly podle Vašeho přání.
Umístěte následující kód (nebo pravidla upraveného stylu) do souboru style.css soubor.
ul # adventDoors pozice: relativní; styl seznamu: žádný; výplň: 0; marže: 0; #adventDoors li position: absolute; #adventDoors li a color: #fff; šířka: 100%; výška: 100%; velikost písma: 24px; zarovnání textu: střed; displej: flex; flex-direction: sloupec; justify-content: center; text-decoration: žádný; ohraničení: 1px #fff solid; #adventDoors li a: not (.disabled): hover color: #fff; barva pozadí: průhledná; barva pozadí: rgba (255,255,255,0,15); #adventDoors li a.disabled border-color: # b6fe98; barva pozadí: rgba (196,254,171,0,15); barva: # b6fe98; kurzor: výchozí;
Krok 5 - Vytvoření globálních proměnných
Od tohoto kroku budeme pracovat pouze s skripty / calendar.js Otevřeme to. Náš Adventní kalendář bude používat dvě globální proměnné.
myCal proměnná uchovává obraz kalendáře jako objekt JS. Obrázek již byl přidán do index.html V kroku 2 umístíme dveře na tento obrázek. Nasnímáme související HTML prvek označený “adventCal” identifikátor pomocí metody getElementById () DOM. myCal proměnná bude objekt DOM HTMLImageElement.
dnešní datum proměnná obsahuje aktuální datum, takže náš skript může snadno rozhodnout, zda mají být dveře povoleny nebo zakázány. Vytvořit dnešní datum vytvoříme nový objekt třídy Date JavaScript.
Vložte následující fragment kódu do horní části vašeho calendar.js soubor.
var myCal = document.getElementById ("adventCal"); var currentDate = new Datum (); Krok 6 - Vytvořte “Dveře” Třída
Protože potřebujeme 24 dveří, nejjednodušší způsob, jak toho dosáhnout, je vytvořit “Dveře” třídy, a později ji proveďte 24 krát.
Naše třída dveří má dva parametry, kalendář a den. Pro kalendář parametr budeme muset projít vánoční obrázek, který bude fungovat jako pozadí. Pro den Parametr budeme muset projít aktuálním prosincovým dnem ve formě celého čísla.
Přesné hodnoty parametrů předáme v posledním kroku (krok 8), během konkretizace 24 objektů vrat.
Provedeme 5 vlastností a 1 metodu pro třídu dveří. V tomto kroku projdeme pouze 5 vlastností a vysvětlím to obsah() v dalším kroku.
“šířka” & “výška” vlastnosti
šířka a výška vlastnosti dynamicky vypočítávají šířku a výšku jednotlivých dveří (mění se podle šířky a výšky obrázku na pozadí).
Multiplikátory 0,1 a 0,95 jsou v rovnici, aby zanechaly určitý prostor pro okraje, mezi jednotlivými dveřmi a také po stranách Kalendáře..
“adventMessage” vlastnictví
adventMessage Vlastnost uchovává obsah výstražných zpráv, a to citace a odpovídající autory, které naše messages.js soubor drží. adventMessage vlastnost vezme cenovou nabídku a autora z zprávy [] pole, v závislosti na aktuálním datu.
Pro 1. prosinec adventMessage vlastnost vezme první prvek vnějšího pole, které je zprávy [0], jako pole jsou v JavaScriptu nulová.
Ze stejného důvodu je kotace pro 1. prosinec umístěna jako zprávy [0] [0] (první prvek vnitřního pole) a odpovídající autor lze dosáhnout jako zprávy [0] [1] (druhý prvek vnitřního pole).
“X”&”y” vlastnosti
Vlastnosti X a y držet správné pozice každé dveře, které budeme používat v dalším kroku nastavit horní a vlevo, odjet Vlastnosti CSS. Ty budou doplňovat poloha: relativní a pozice: absolutní CSS pravidla, která jsme nastavili v kroku 4 pro dveřní kontejner (ul # adventDoors) a samotné dveře (#adventDoors li). Výpočty se mohou zdát poněkud zastrašující, ale rychle jdeme přes ně.
X vlastnost bude využívána společností vlevo, odjet Vlastnost umístění CSS v dalším kroku (krok 7). Určuje v pixelech, kde musí být jednotlivé dveře umístěny na ose x.
To vezme šířku obrazu na pozadí, a to ponechá malý okraj pro to (4%). S pomocí zbytkového operátora pak vyhodnotí, ve kterém sloupci bude umístěn (nezapomeňte, že budou 4 sloupce), a nakonec přidává do každého jednotlivého dveří malý násobek (10%) pomocí násobitele 1,1.
Stejným způsobem y vlastnost bude využívána společností horní Vlastnost polohování CSS a také určuje v obrazových bodech, kde je třeba umístit jednotlivé dveře na osu y.
Výšku obrázku na pozadí si vezmeme pomocí vlastnosti výšky předaného kalendář Parametr (který drží objekt DOM) a ponechat okraj 4% kolem svislých stran kalendáře.
Potom pomocí metody Math.floor () vypočítáme, v kterém řádku bude daný objekt dveří (bude 6 řádků).
Nakonec přidáme 10% marži pro každý objekt dveří vynásobením jeho výšky pomocí násobitele 1.1.
function Door (kalendář, den) this.width = ((calendar.width - 0.1 * calendar.width) / 4) * 0.95; this.height = ((calendar.height - 0,1 * calendar.height) / 6) * 0,95; this.adventMessage = 'Den' + den + 'adventu n' + '' '+ zprávy [den - 1] [0] +' "n '+' podle '+ zprávy [den - 1] [1] + 'n'; this.x = (0.04 * calendar.width + ((den - 1)% 4) * (1.1 * this.width)); this.y = - (0.96 * calendar.height - Math.floor ((den - 1) / 4) * (1.1 * this.height)); this.content = function () …;
Krok 7 - Naplňte “Obsah()” Metoda
Je to obsah() metoda, která zobrazí naše dveře v prohlížeči. Nejprve vytvoříme nový uzel DOM pomocí proměnné uzel který vytvoří
Vzhledem k tomu, že třída Door bude v následujícím kroku (krok 8) instalována 24 krát ve smyčce for, znamená to, že budeme mít 24
Vlastnost node.id v dalším řádku přidá ke každému prvku seznamu (dveře) jedinečný volič id. Budeme to potřebovat, abychom mohli řádně projít dny v dalším kroku (krok 8). Tímto způsobem budou dveře 1 mít id =”dveře1 ", Dveře 2 budou mít id =”dveře2 " volič atd.
Vlastnost node.style.cssText v dalším řádku přidává některá pravidla CSS do každého prvku seznamu (dveří) s pomocí styl =”… ” HTML atribut, který se používá k zahrnutí inline CSS do HTML souborů. node.style.cssText vlastnost používá vlastnosti třídy Door, které jsme nastavili v předchozím kroku (krok 6).
Aby bylo možné kliknout na objekt Dveře, musíme také přidat tag uvnitř prvků seznamu. Toho dosáhneme pomocí innerNode proměnnou, kterou vázáme jako podřízený prvek na příslušný prvek seznamu identifikovaný id =”dveře [i]” selector (s [i] je číslo dne), pomocí metody appendChild () DOM stejně jako dříve.
Vlastnost innerHTML v následujícím řádku zobrazuje aktuální den (1-24) v horní části dvířek v prohlížeči a přidáme také href =”#” atributu našich kotevních značek pomocí vlastnosti href DOM.
Nakonec v příkazu if-else vyhodnocujeme, zda má být objekt Door povolen nebo zakázán. Nejprve se podíváme, zda jsme ve 12. měsíci roku (prosinec) pomocí metody getMonth () objektu Date. Musíme přidat 1, protože getMonth () je nula (leden je měsíc 0 atd.).
Poté zkontrolujeme, zda se aktuální datum konalo v dnešní datum globální proměnná nastavená v kroku 5 je menší než den aktuální objekt Door představuje.
Pokud se nejedná o prosinec, nebo o den reprezentovaný danými dveřmi je větší než aktuální datum, dveře by měly být vypnuty, v ostatních případech musí být povoleno, aby na něj uživatelé mohli kliknout a zobrazit související adventní zprávu..
Pokud jsou dveře deaktivovány, přidáme a třída =”zakázáno” pomocí vlastnosti className vyberte danou kotevní značku. Pamatujte si, že jsme to už vytvořili .zakázáno třídy s CSS v kroku 4. Také musíme nastavit atribut události onclick HTML, aby se vrátil false.
Pokud jsou dveře v aktivovaném stavu, přidáme adventMessage vlastnost na výstražnou zprávu a umístěte ji do atributu události onclick HTML.
this.content = function () var node = document.createElement ("li"); document.getElementById ("adventDoors"). appendChild (uzel); node.id = "door" + day; node.style.cssText = "width:" + this.width + "px; height:" + this.height + "px; top:" + this.y + "px; vlevo:" + this.x + "px ; "; var innerNode = document.createElement ("a"); document.getElementById ("door" + day) .appendChild (innerNode); innerNode.innerHTML = den; 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; ; Krok 8 - Inicializujte “Dveře” Objekty
Nakonec musíme inicializovat třídu dveří 24krát.
K tomuto účelu používáme výraz Immedantly Invoked Function Expression, který je zde velmi užitečný, protože nepotřebujeme proměnnou, protože chceme pouze provést kód uvnitř funkce..
Vytváříme dveře [] pole, které bude obsahovat 24 objektů Door. Projíždíme dny od 1 do 24 (budou 0-23. Prvky pole [] pole, protože pole jsou nulová) a nakonec vrátí celek dveře [] pole, včetně 24 objektů Door, aby se zobrazily v prohlížeči.
(function () var doors = []; pro (var i = 0; i < 24; i++) doors[i] = new Door(myCal, i + 1); doors[i].content(); return doors; )();
- Demo
- Stáhněte si zdroj
