Pod obrázkom umiestnime prázdny neusporiadaný zoznam s “adventDoors” id selektor, ktorý bude vyplnený skripty. Ak používateľ nemá vo svojom prehliadači povolený jazyk JavaScript, uvidí jednoduchý vianočný obrázok.

            
 
Adventný kalendár
  
 
     

Krok 3 - Vyplňte “správy” rad

Potrebujeme 24 vianočných cenových ponúk na vyplnenie “správy” array. Vybral som moje z GoodReads.

Otvor scripts / messages.js súbor; tu uvádzame úvodzovky, aby sme ich oddelili od funkčnosti. správy pole je pole v mape, každý prvok vonkajšieho poľa obsahuje ďalšie pole s dvoma prvkami: citát a jeho autor.

Vložte pole s vašimi obľúbenými cenovými ponukami podľa nasledujúcej syntaxe:

 var správy = [["Citácia 1", "Autor 1"], ["Citácia 2", "Autor 2"], ... ["Citácia 24", "Autor 24"]];

Krok 4 - Pridanie základných štýlov CSS pre dvere

Ak chcete vytvoriť potrebné štýly CSS pre dvere, musíme si predstaviť konečný dizajn, pretože samotné dvere budú vytvorené pomocou jazyka JavaScript v nasledujúcich krokoch.

Musíme vytvoriť 4 stĺpce a 6 riadkov obdĺžnikov v správnom zarovnaní. Za týmto účelom použijeme pozícia: relatívna a poloha: absolútna Pravidlá CSS. Keď sa presná poloha zmení dvere po dverách, pridáme to top, dno, ľavý, a správny vlastnosti v jazyku JavaScript, v CSS stačí pridať relatívnu pozíciu ku kontajneru (nezoradený zoznam v jazyku HTML) a absolútne pozície pre prvky zoznamu (pridajú sa aj do JS).

Ďalšia dôležitá vec v súbore šablón štýlov je vytvoriť iný dizajn pre postihnutých a povolené stavy. .invalidný selektor bude pridaný k zakázanému jazyku JavaScript.

Pre moje demo Kalendár som nastavil pevný biely okraj a biele písma pre povolené dvere s priehľadným bielym pozadím na vznášanie; a svetlozelená hranica a písma a transparentné svetlozelené pozadie pre osoby so zdravotným postihnutím. Ak sa vám tento dizajn nepáči, môžete meniť farby a štýly podľa vášho želania.

Umiestnite nasledujúci kód (alebo upravené pravidlá štýlu) do svojho style.css súbor.

 ul # adventDoors pozícia: relatívna; štýl zoznamu: žiadne; polstrovanie: 0; rozpätie: 0;  #adventDoors li pozícia: absolútna;  #adventDoors li a farba: #fff; šírka: 100%; výška: 100%; veľkosť písma: 24px; text-align: center; zobrazenie: flex; flex-smer: stĺpec; justify-content: center; textová výzdoba: žiadne; okraj: 1px #fff pevný;  #adventDoors li a: nie (.disabled): vznášať color: #fff; farba pozadia: transparentná; farba pozadia: rgba (255,255,255,0.15);  #adventDoors li a.disabled okraj-farba: # b6fe98; farba pozadia: rgba (196,254,171,0.15); farba: # b6fe98; kurzor: predvolené; 

Krok 5 - Vytvorte globálne premenné

Od tohto kroku budeme pracovať len s scripts / calendar.js súbor, takže teraz ho otvorme. Náš Adventný kalendár bude používať dve globálne premenné.

myCal premenná drží obrázok Kalendára ako objekt JS. Obraz už bol pridaný do priečinka index.html súbor v kroku 2. Dvere umiestnime na tento obrázok v kroku 7. Zachytíme príslušný kód HTML prvok označený symbolom “adventCal” identifikátor pomocou metódy getElementById () DOM. myCal premenná bude objekt HTMLImageElement DOM.

aktuálny dátum premenná obsahuje aktuálny dátum tak, aby sa náš skript mohol ľahko rozhodnúť, či by mali byť dvere povolené alebo zakázané. Vytvoriť aktuálny dátum inštancujeme nový objekt triedy Date JavaScript.

Vložte nasledujúci útržok kódu do hornej časti calendar.js súbor.

 var myCal = document.getElementById ("adventCal"); var aktuálny dátum = nový dátum ();

Krok 6 - Vytvorte “dvere” Trieda

Keďže potrebujeme 24 dverí, najjednoduchší spôsob, ako to urobiť, je vytvoriť “dvere” triedy a neskôr ju vytvoriť 24-krát.

Naša trieda dverí má dva parametre, kalendár a deň. Pre kalendár parameter budeme musieť prejsť vianočný obrázok, ktorý bude fungovať ako pozadie. Pre deň parameter budeme musieť prejsť aktuálny december vo forme celého čísla.

Presné hodnoty parametrov odovzdáme v poslednom kroku (krok 8) počas inštancie objektov 24 dverí.

Pre triedu dverí vytvoríme 5 vlastností a 1 spôsob. V tomto kroku budeme prechádzať len cez 5 nehnuteľností a vysvetlím to obsah () v ďalšom kroku.

“šírka” & “výška” vlastnosti

šírka a výška vlastnosti dynamicky vypočítavajú šírku a výšku jednotlivých dverí (ktoré sa menia podľa šírky a výšky obrazu na pozadí).

Koeficienty 0,1 a 0,95 sú v rovnici tak, aby ponechali nejaký priestor pre okraje, medzi dvoma dverami a po stranách kalendára..

“adventMessage” vlastnosť

adventMessage vlastníctvo obsahuje obsah výstražných správ, konkrétne citátov a zodpovedajúcich autorov, ktoré našu messages.js súbor drží. adventMessage nehnuteľnosť má cenovú ponuku a autor od správy [] pole, v závislosti od aktuálneho dátumu.

Pre december 1 adventMessage vlastnosť má prvý prvok vonkajšieho poľa, ktorý je správy [0], pretože súbory sú v programe JavaScript založené na nulách.

Z rovnakého dôvodu je cenová ponuka pre 1. december umiestnená ako správy [0] [0] (prvý prvok vnútorného poľa) a zodpovedajúceho autora sa dá dosiahnuť ako správy [0] [1] (druhý prvok vnútorného poľa).

“X”&”y” vlastnosti

vlastnosti X a y držte správne pozície každého dverí, ktoré použijeme v ďalšom kroku na nastavenie top a ľavý Vlastnosti CSS. Tieto budú dopĺňať pozícia: relatívna a poloha: absolútna Pravidlá CSS, ktoré sme nastavili v kroku 4 pre kontajner dverí (ul # adventDoors) a samotné dvere (#adventDoors li). Výpočty sa môžu zdajú byť trochu zastrašujúce, ale prejdime ich rýchlo.

X nehnuteľnosť bude použitá ľavý CSS v nasledujúcom kroku (krok 7). Určuje v pixeloch, kde je potrebné umiestniť jednotlivé dvere na os x.

Zoberie to šírku obrazu na pozadí a ponecháva si na ňu malú rezervu (4%). Potom s pomocou operátora zvyšku vyhodnotí, v ktorom stĺpci bude umiestnený (nezabudnite, že bude 4 stĺpce) a nakoniec pridáva malý (10%) okraj do každej dvery pomocou násobiča 1.1.

Rovnakým spôsobom y nehnuteľnosť bude použitá top CSS určuje vlastnosť a podobne určuje v pixeloch, kde je potrebné umiestniť jednotlivé dvere na os y.

Vezmeme výšku obrazu na pozadí pomocou vlastností výšky prechádzajúceho kalendár parameter (ktorý obsahuje objekt DOM) a ponechajte 4% okraj okolo zvislých stránok kalendára.

Potom pomocou metódy Math.floor () vypočítame, v ktorom riadku daný dverný objekt bude (bude 6 riadkov).

Nakoniec pridáme 10% rozpätie pre každý objekt dverí vynásobením jeho výšky použitím násobiča 1,1.

 funkcia Dvere (kalendár, deň) this.width = ((calendar.width - 0.1 * calendar.width) / 4) * 0.95; this.height = ((calendar.height - 0.1 * calendar.height) / 6) * 0.95; this.adventMessage = 'deň' + deň + 'adventu \ n \ n' + '"+ správy [deň - 1] [0] +'" \ n \ - 1] [1] + '\ n \ n'; this.x = (0,04 * calendar.width + ((deň - 1)% 4) * (1,1 * táto šírka)); this.y = - (0,96 * calendar.height - Math.floor ((deň - 1) / 4) * (1,1 * táto výška)); this.content = funkcia () ...; 

Krok 7 - Vyplňte “Content ()” metóda

Je to obsah () spôsob, ktorý zobrazí naše dvere v prehliadači. V prvom rade vytvoríme nový uzol DOM pomocou premennej uzol ktorý vytvorí

 this.content = funkcia () var node = document.createElement ("li"); document.getElementById ( "adventDoors") appendChild (uzla). node.id = "dvere" + deň; node.style.cssText = "šírka:" + this.width + "px; výška:" + this.height + "px; top:" + this.y + "px; left:" + this.x + "px "; var innerNode = dokument.createElement ("a"); dokument.getElementById ("dvere" + deň) .appendChild (vnútornáNode); innerNode.innerHTML = deň; innerNode.href = "#"; ak ((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;   ;

 (funkcia () var dvere = [], pre (var i = 0; i < 24; i++)  doors[i] = new Door(myCal, i + 1); doors[i].content();  return doors; )();