Kuvan alapuolella asetamme tyhjän järjestämättömän luettelon “adventDoors” id-valitsin, jonka skriptit täyttävät. Jos käyttäjällä ei ole JavaScriptiä selaimessa, he näkevät vain yksinkertaisen joulun kuvan.

            
 
Joulukalenteri
  
 
     

Vaihe 3 - Täytä “viestien” ryhmä

Tarvitsemme 24 joulun lainausta “viestien” array. Valitsin GoodReadsista minun.

Avaa skriptejä / messages.js tiedosto; sijoitamme lainaukset täällä, jotta ne säilyvät erillään toiminnallisuudesta. viestien matriisi on matriisin sisällä oleva taulukko, jokaisen ulomman ryhmän elementti sisältää toisen joukon, jossa on kaksi elementtiä: lainaus ja sen tekijä.

Lisää taulukko suosikkikoodeillasi seuraavan syntaksin mukaan:

 var messages = [[Quote 1 "," Author 1 "], [" Quote 2 "," Author 2 "],… [" Quote 24 "," Author 24 "]];

Vaihe 4 - Lisää perus-CSS-tyylit oville

Tarvittavien CSS-tyylien luomiseksi oville meidän on kuviteltava lopullinen muotoilu, koska ovet itse luodaan JavaScriptin avulla seuraavissa vaiheissa.

Meidän on luotava 4 saraketta ja 6 riviä suorakulmioita oikeassa linjassa. Tätä varten käytämme sijainti: suhteellinen ja asema: absoluuttinen CSS-säännöt. Kun tarkka sijainti muuttuu ovelta ovelle, lisäämme sen ylin, pohja, vasen, ja oikea ominaisuuksia JavaScriptissä, CSS: ssä meidän on vain lisättävä suhteellinen sijainti konttiin (järjestämätön lista HTML: ssä) ja absoluuttiset sijainnit luettelon elementteihin (ne lisätään myös JS: ään).

Toinen tärkeä asia tyylitaulukon tiedostossa on luo eri muotoilu vammaisille ja sallituille tiloille. .liikuntarajoitteinen valitsin lisätään vammaisille JavaScript.

Demo-kalenterini varten asetin kiinteät valkoiset reunat ja valkoiset fontit sallituille oville läpinäkyvällä valkoisella taustalla. ja vaalean rajan sekä fontit ja läpinäkyvä vaalea tausta vammaisille. Jos et pidä tästä suunnittelusta, voit muuttaa värejä ja tyylejä haluamallasi tavalla.

Aseta seuraava koodi (tai muokatun tyylisi säännöt) omaan style.css tiedosto.

 ul # adventDoors sijainti: suhteellinen; list-style: ei; pehmuste: 0; marginaali: 0;  #adventDoors li sijainti: absoluuttinen;  #adventDoors li a väri: #fff; leveys: 100%; korkeus: 100%; kirjasinkoko: 24px; text-align: center; näyttö: flex; joustava suunta: sarake; perustella sisältö: keskus; teksti-koristelu: ei; raja: 1px #fff kiinteä;  #adventDoors li a: ei (.disabled): hover color: #fff; taustaväri: läpinäkyvä; taustaväri: rgba (255,255,255,0,15);  #adventDoors li a.disabled border-color: # b6fe98; taustaväri: rgba (196,254,171,0,15); väri: # b6fe98; kohdistin: oletus; 

Vaihe 5 - Luo globaalit muuttujat

Tästä vaiheesta lähtien toimimme vain skriptejä / calendar.js tiedosto, joten nyt avataan se. Adventtikalenterissamme käytetään kahta globaalia muuttujaa.

myCal muuttuja pitää kalenterikuvan JS-objektina. Kuva on jo lisätty index.html tiedosto 2. vaiheessa. Asennamme ovet tähän kuvaan vaiheessa 7. Otamme siihen liittyvän HTML-tiedoston elementillä merkitty “adventCal” tunniste käyttäen getElementById () DOM-menetelmää. myCal muuttuja on HTMLImageElement DOM -objekti.

CURRENTDATE muuttuja pitää nykyisen päivämäärän, jotta käsikirjamme voi helposti päättää, onko ovi otettava käyttöön tai poistettava käytöstä. Luoda CURRENTDATE me päivitämme uuden päivämäärän JavaScript-luokan objektin.

Laita seuraava koodinpätkä sinun calendar.js tiedosto.

 var myCal = document.getElementById ("adventCal"); var currentDate = uusi Päivämäärä ();

Vaihe 6 - Luo “Ovi” luokka

Koska tarvitsemme 24 ovea, yksinkertaisin tapa tehdä tämä on luoda a “Ovi” luokkaa, ja sen jälkeen myöhemmin 24 kertaa.

Meidän oviluokkamme on kaksi parametria, kalenteri ja päivä. Varten kalenteri Parametrin, jonka täytyy siirtää joulun kuva, joka toimii taustana. Varten päivä Parametrin, jonka täytyy kulua joulukuun nykyisenä päivänä kokonaislukuna.

Siirrämme parametrien täsmälliset arvot viimeisessä vaiheessa (vaihe 8) 24 oviobjektin esittelyn aikana.

Teemme luokan 5 ominaisuuksia ja yhden menetelmän. Tässä vaiheessa käymme läpi vain viisi ominaisuutta, ja selitän pitoisuus () menetelmä seuraavassa vaiheessa.

“leveys” & “korkeus” ominaisuudet

leveys ja korkeus ominaisuudet laskevat dynaamisesti kunkin yksittäisen oven leveyden ja korkeuden (joka muuttuu taustakuvan leveyden ja korkeuden mukaan).

0,1 ja 0,95 kertoimet ovat yhtälössä, joten niillä on tilaa marginaalien, ovien ja kalenterin sivujen välissä..

“adventMessage” omaisuus

adventMessage omaisuudella on hälytysviestien sisältö, nimittäin lainaukset ja vastaavat tekijät messages.js tiedosto pitää sisällään. adventMessage omaisuus vie lainauksen ja kirjailija viestejä [] matriisi nykyisestä päivämäärästä riippuen.

Joulukuun 1. päivä adventMessage omaisuus ottaa ulkoisen taulukon ensimmäisen elementin, joka on viestejä [0], koska taulukot ovat nolla-pohjaisia ​​JavaScriptissä.

Samasta syystä 1 päivän tarjous on sijoitettu viestejä [0] [0] (Sisäisen taulukon ensimmäinen elementti) ja vastaava kirjoittaja voidaan saavuttaa kuten viestejä [0] [1] (sisäisen taulukon toinen elementti).

“x”&”y” ominaisuudet

ominaisuudet x ja y pidä kunkin oven oikeat asemat, joita käytämme seuraavassa vaiheessa asettamaan ylin ja vasen CSS-ominaisuudet. Nämä täydentävät sijainti: suhteellinen ja asema: absoluuttinen CSS-säännöt, jotka asetimme vaiheessa 4 ovisäiliölle (ul # adventDoors), ja ovet itse (#adventDoors li). Laskelmat voivat tuntua hieman uhkaavilta, mutta lähdetään nopeasti niiden läpi.

x omaisuutta käyttää vasen CSS-paikannusominaisuus seuraavassa vaiheessa (vaihe 7). Se määrittää pikseleinä, joissa x-akselille on asetettava yksittäinen ovi.

Se vie taustakuvan leveyden, ja se jättää sille pienen marginaalin (4%). Sitten se arvioi loput operaattorin avulla, missä sarakkeessa se sijoitetaan (muista, että sarakkeita on 4), ja lopuksi se lisää pienen (10%) marginaalin jokaiselle ovelle käyttämällä 1,1-kerrointa.

Samoin, y omaisuutta käyttää ylin CSS-paikannusominaisuus ja myös se määrittää pikseleinä, joissa yksittäinen ovi on asetettava y-akselille.

Otamme taustakuvan korkeuden siirretyn ylemmän ominaisuuden avulla kalenteri parametrin (joka sisältää DOM-objektin) ja jättää 4%: n marginaalin kalenterin pystysuorien sivujen ympärille.

Sitten lasketaan Math.floor () -menetelmän avulla, missä rivissä tietty oviobjekti on (tulee olemaan 6 riviä).

Lopuksi lisätään 10%: n marginaali jokaiselle ovi-objektille kertomalla sen korkeus käyttäen 1,1-kerrointa.

 toiminto Ovi (kalenteri, päivä) this.width = ((calendar.width - 0,1 * calendar.width) / 4) * 0,95; this.height = ((calendar.height - 0,1 * calendar.height) / 6) * 0,95; this.adventMessage = Adventin n päivä '+ päivä +' n '+' "'+ viestit [päivä - 1] [0] +'" n "\ t - 1] [1] + 'n n'; this.x = (0,04 * calendar.width + ((päivä - 1)% 4) * (1,1 * tätä.leveyttä)); this.y = - (0.96 * calendar.height - Math.floor ((päivä - 1) / 4) * (1,1 * tätä.nopeutta)); this.content = toiminto () …; 

Vaihe 7 - Täytä “Sisältö ()” Menetelmä

Se on pitoisuus () menetelmä, joka näyttää ovet selaimessa. Ensinnäkin luomme uuden DOM-solmun muuttujan avulla solmu joka luo

 this.content = toiminto () var node = document.createElement ("li"); document.getElementById ( "adventDoors"). AppendChild (solmu); node.id = "ovi" + päivä; node.style.cssText = "leveys:" + tämä.leveys + "px; korkeus:" + tämä.leveys + "px; alkuun:" + tämä.y + "px; vasen:" + tämä.x + "px ; " var internalNode = document.createElement ("a"); document.getElementById ("ovi" + päivä) .appendChild (InternalNode); internalNode.innerHTML = päivä; internalNode.href = "#"; jos ((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;   ;

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