Kuidas ehitada JavaScriptis lihtne adventkalender / Kodeerimine

Advent on jõulude ootamise ja ettevalmistamise periood, mis algab neli pühapäeva enne jõule. Advendi aja möödumist mõõdetakse traditsiooniliselt advendikalendri või adventpärgade abil. Kuigi advendi algus ei ole kindel kuupäev, algavad adventkalendrid tavaliselt 1. detsembril.

Kohalike tavade põhjal võivad adventkalendrid olla erineva kujundusega, kuid kõige sagedamini on need vormis suured ristkülikukujulised kaardid, millel on 24 akent või ust 1. – 24. detsembri vahel tähistatakse päevi. Uksed peidavad sõnumeid, luuletusi, palveid või vähe üllatusi.

Selles postituses näitan teile, kuidas tehke adventkalender objekti-orienteeritud JavaScriptis. Kuna see on tehtud vanilje JavaScripti, saate koodi lihtsalt oma veebisaidile paigutada.

JavaScripti kalender

Meie adventkalenderil on 24 ust jõulude teemapildil. Iga uks peidab jõuluga seotud tsiteeringu ilmub hoiatussõnumi kujul, kui kasutaja ukse peale klõpsab. Uksed jäävad suletud ajani, kuni see päev saabub, nagu see on reaalse elu adventkalendri puhul; uksi ei saa avada enne õiget päeva.

Olemasolevad uksed on erineva piiri ja taustavärviga (valge) kui puudega inimesed (heledad). Me kasutame HTML5, CSS3 ja JavaScripti, et valmistada ette meie adventkalender, mis näeb välja selline:

1. samm - loo failistruktuur ja ressursid

Esiteks peame valima kena taustapildi. Valisin Pixabayst portree orientatsiooniga ühe, nii et minu kalendris on 4 veergu ja 6 rida.

See on hea, kui eelistate maastikku. Lihtsalt muutke JavaScript-koodi uste positsioone, nagu teil on 6 veergu ja 4 rida. Kui teil on pilt, looge kaust nimega / pildid, ja salvestage see.

JavaScripti failide jaoks looge a / skriptid kausta sees. Asetage sellesse kaks tühja tekstifaili ja nimetage need calendar.js ja messages.js. Calendar.js hoiab samal ajal funktsionaalsust messages.js sisaldab kasutajate hulgast ilmuvate sõnumite massiivi “avaneb” uksed (klõpsab).

Meil on vaja ka HTML-i ja CSS-faili, nii et looge juurkausta sees kaks tühja faili ja andke neile nimed index.html ja style.css.

Kui olete valmis, on teil vajalikud vahendid ja failistruktuur, mida peate selle projekti teostamiseks, ja teie juurkaust näeb välja selline:

2. samm - loo HTML

Kasutatav HTML-kood on üsna lihtne. CSS-laaditabel on seotud sektsiooni, samas kui kaks põhifaili sisalduvad JavaScriptis lõik. Viimane on vajalik, sest kui paneme skriptid jaotist, koodi ei täideta, nagu see on kasutab laaditud HTML-lehekülje elemente.

semantiline sild. Me laadime jõulupildi HTML-element, mitte CSS-i taustavara, sest sel viisil saame hõlpsasti sellele juurdepääsu DOM-i elemendina.

Pildi all asetame tühja järjekorras oleva nimekirja “adventiDoorid” id valija, mida skriptid täidavad. Kui kasutajal pole brauseris lubatud JavaScript, näevad nad lihtsalt lihtsat jõulupilti.

     Advendikalender        Advendikalender

3. samm “Sõnumid” Array

Me vajame 24 jõulumärkimist “sõnumeid” massiivi. Valisin kaevanduse GoodReadsist.

Ava skriptid / messages.js fail; me paigutame hinnapakkumised siia, et neid funktsionaalsusest eraldada. The sõnumeid massiiv on massiivi massiivi sees, välise massiivi iga element sisaldab teist massiivi, millel on kaks elementi: tsitaat ja selle autor.

Täitke massiiv oma lemmikmärkidega vastavalt järgmisele süntaksile:

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

Samm 4 - Lisa põhilised CSS-stiilid ustele

Selleks, et luua uksele vajalikud CSS-stiilid, peame ette kujutama lõplikku disaini, sest uksed luuakse JavaScriptiga järgmistes sammudes.

Me peame looma õiges joonduses 4 veergu ja 6 rida ruutu. Selleks kasutame seda positsioon: suhteline ja positsioon: absoluutne CSS reeglid. Kuna täpne positsioon muutub ukse järgi, lisame selle top, põhja, vasakule, ja õigus JavaScripti omadused, CSS-s peame lihtsalt lisama konteinerisse suhtelise positsiooni (HTML-i järjekorras olevad loendid) ja loendielementide absoluutsed positsioonid (need lisatakse ka JS-i).

Teine oluline stiilifaili asi on luua puuetega inimestele ja lubatud olekutele erinev kujundus. The .keelatud valikuklahvi lisab puuetega inimestele JavaScript.

Oma demokalendri jaoks seadistasin sisselülitatud uste jaoks valge valge ja valge fonte läbipaistva valge taustaga; ja heleroheline ääris ning fondid ja läbipaistev heleroheline taust puuetega inimestele. Kui teile ei meeldi see disain, saate värve ja stiile vastavalt soovile muuta.

Asetage järgmine kood (või teie muudetud stiilieeskirjad) oma style.css faili.

 ul # advent Doors positsioon: suhteline; list-style: mitte; polster: 0; varu: 0;  #adventDoors li asukoht: absoluutne;  #adventDoors li a color: #fff; laius: 100%; kõrgus: 100%; fondi suurus: 24px; teksti joondamine: keskus; kuva: flex; elastne suund: veerg; õigustada sisu: keskus; teksti kaunistus: mitte; piir: 1px #fff tahke;  #adventDoors li a: not (.disabled): hover color: #fff; taustavärv: läbipaistev; taustavärv: rgba (255,255,255,0,15);  #adventDoors li a.disabled border-color: # b6fe98; taustavärv: rgba (196,254,171,0,15); värv: # b6fe98; kursor: vaikimisi;

5. etapp - globaalsete muutujate loomine

Sellest sammust töötame ainult koos scripts / calendar.js fail, nii et nüüd avame selle. Meie Adventide kalendris kasutatakse kahte globaalset muutujat.

The myCal muutuja hoiab kalendri kujutist JS-objektina. Pilt on juba lisatud index.html me paneme selle sammu juurde 7. etapis. Me võtame sellega seotud HTML-i elemendiga tähistatud element “adventCal” identifikaatorit kasutades getElementById () DOM meetodit. The myCal muutuja on HTMLImageElement DOM objekt.

The tänane kuupäev muutuja omab praegust kuupäeva, nii et meie skript suudab kergesti otsustada, kas uks peaks olema lubatud või keelatud. Looma tänane kuupäev me rakendame kuupäeva Date klassi uut objekti.

Pange järgmine koodilõik oma calendar.js faili.

 var myCal = document.getElementById ("adventCal"); var currentDate = uus kuupäev ();

6. samm - looge “Uks” Klass

Kuna vajame 24 ust, on kõige lihtsam viis seda teha “Uks” klassi ja hiljem seda 24 korda.

Meie uste klassil on kaks parameetrit, kalendrit ja päev. Selle eest kalendrit parameeter, mida me peame läbima jõulupildi, mis toimib taustana. Selle eest päev parameeter, mille peame läbima praeguse detsembri päeva täisarvuna.

Me edastame parameetrite täpsed väärtused viimases etapis (samm 8) 24 ukseobjekti esitamise ajal.

Teeme ukse klassi jaoks 5 omadust ja 1 meetodi. Selles etapis läbime ainult 5 kinnistut ja seletan seda sisu() meetod järgmises etapis.

The “laius” & “kõrgus” omadused

The laius ja kõrgus omadused arvutavad dünaamiliselt iga ukse laiuse ja kõrguse (mis muutub vastavalt taustapildi laiusele ja kõrgusele).

0,1 ja 0,95 kordajad on võrrandis, et jätta mõningad ruumid marginaalidele, iga ukse ja kalendri külgede vahele..

The “adventMessage” vara

The adventMessage vara hoiab hoiatusteadete sisu, nimelt hinnapakkumisi ja meie poolt sobitavaid autoreid messages.js failil on. The adventMessage vara võtab tsitaadi ja autori sõnumid [] massiivi, sõltuvalt praegusest kuupäevast.

1. detsembriks adventMessage vara võtab välise massiivi esimese elemendi, mis on sõnumid [0], kui massiivid on JavaScriptis nullil põhinevad.

Samal põhjusel on 1. detsembri hinnapakkumine paigutatud kui sõnumid [0] [0] (sisemise massiivi esimene element) ja sobiva autoriga saab jõuda sõnumid [0] [1] (sisemise massiivi teine element).

The “x”&”y” omadused

Omadused x ja y hoidke iga ukse õigeid asendeid, mida me kasutame järgmises etapis top ja vasakule CSS-i omadused. Need täiendavad positsioon: suhteline ja positsioon: absoluutne CSS-reeglid, mille me 4. sammus me uksekonteinerile (ul # adventDoors) seadsime, ja uksed ise (#adventDoors li). Arvutused võivad tunduda mõnevõrra hirmutavad, kuid läheme nende kaudu kiiresti läbi.

The x vara kasutab vasakule CSS-i positsioneerimise omadus järgmises etapis (samm 7). See määrab pikslites, kus x-teljele tuleb paigutada individuaalne uks.

See võtab taustapildi laiuse ja jätab sellele veidi varu (4%). Seejärel hindab ta ülejäänud operaatori abiga, millises veerus see paigutatakse (pidage meeles, et seal on 4 veergu) ja lõpuks lisab see igale uksele vähe (10%), kasutades 1,1 kordajat.

Samamoodi, y vara kasutab top CSS-i positsioneerimise omadus ja samuti pikslites, kus y-teljele tuleb paigutada üksikuks..

Me võtame taustapildi kõrguse edastatud sisendi kõrgusomandi abil kalendrit parameeter (mis omab DOM-objekti) ja jätke 4% -line varu kalendri vertikaalsete külgede ümber.

Seejärel arvutame Math.floor () meetodi abil, millisel real on antud uksobjekt (6 rida).

Lõpuks lisame iga ukseobjekti jaoks 10% marginaali, korrutades selle kõrguse kasutades 1,1 kordajat.

 funktsioon Uks (kalender, päev) this.width = ((calendar.width - 0,1 * calendar.width) / 4) * 0,95; this.height = ((calendar.height - 0,1 * calendar.height) / 6) * 0,95; this.adventMessage = Advendi n 'päev' + päev + 'n' + '"' + sõnumid [päev - 1] [0] + '" n "\ t - 1] [1] + 'n'; this.x = (0,04 * calendar.width + ((päev - 1)% 4) * (1.1 * this.width)); this.y = - (0.96 * calendar.height - Matemaatika-põrand ((päev - 1) / 4) * (1,1 * seda.olukorda)); this.content = funktsioon () …;

7. samm “Sisu()” Meetod

See on sisu() meetod, mis kuvab meie uksed brauseris. Esiteks loome muutuja abil uue DOM sõlme sõlme see loob

elemendid, mis asuvad meie praeguses tühjas järjekorras olevas nimekirjas (ul # adventDoors) HTML-failis.

Kuna Ukse klass viiakse järgmises etapis 24 korda ette (8. samm), tähendab see seda, et meil on 24

elemendid, üks li iga ukse kohta. Järgmises reas lisame uue sõlme #adventDoors korrastamata nimekiri lapse elemendina, kasutades rakenduse appendChild () DOM meetodit.

Järgmisel real olev node.id omadus lisab igale loendielemendile (uksele) unikaalse ID-valija. Me vajame seda selleks, et saaksime järgmise etapi päevadel korralikult silmuseni (samm 8). Sel viisil on uksel 1 id =”uks1 ", Uksel 2 on id =”uks2 " valija jne.

Järgmisel real olev node.style.cssText omadus lisab igale loendielemendile (uksele) mõned CSS-reeglid stiil =”… ” HTML-atribuut, mida kasutatakse HTML-failides inline CSS-i lisamiseks. The node.style.cssText vara kasutab eelmises etapis määratud ukseklassi omadusi (samm 6).

Selleks, et muuta meie ukse objekti klõpsatavaks, peame lisama ka sildi nimekirja elementide sees. Me saavutame selle InternalNode muutuja, mille me sidume lapse elemendina sobiva loendielemendiga, mille on identifitseerinud id =”uks [i]” valija (kus [i] on päeva number), kasutades appendChild () DOM meetodit nagu enne.

Järgmises reas olev sisemineHTML-omadus näitab brauseri ukse peal olevat päeva (1-24) ja lisame ka href =”#” omistage meie ankrumärgistele href DOM-i omaduse abil.

Lõpuks hindame if-else avalduses, kas ukseobjekt peaks olema lubatud või keelatud. Esiteks uurime, kas me oleme aasta 12. kuul (detsember), kasutades kuupäevaobjekti getMonth () meetodit. Peame lisama 1, sest getMonth () on nullil põhinev (jaanuar on kuu 0 jne).

Pärast seda kontrollime, kas praegune kuupäev on tänane kuupäev etapp 5 on globaalne muutuja väiksem kui päev et praegune ukseobjekt esindab.

Kui see ei ole detsember või päev, mida antud uks esindab, on suurem kui praegune kuupäev, peaks uks olema keelatud, kuid muudel juhtudel peab see olema sisse lülitatud, et kasutajad saaksid seda klõpsata ja näha advent-sõnumit.

Kui uks on keelatud, lisame a klass =”keelatud” valikukasti antud ankurmärgiga klassi nime omaduse abil. Pea meeles, et oleme juba kujundanud selle .keelatud klassi CSS-ga 4. etapis. Samuti peame määrama onclick HTML-i sündmuse atribuudi, et naasta vale.

Kui uks on sisse lülitatud, lisame selle adventMessage ja hoia see sisestatud HTML-i sündmuse atribuuti.

 this.content = funktsioon () var node = document.createElement ("li"); document.getElementById ("advent Doors"). appendChild (sõlm); node.id = "uks" + päev; node.style.cssText = "laius:" + see. laius + "px; kõrgus:" + see. kõrgus + "px; top:" + see.y + "px; vasak:" + see.x + "px ; "; var internalNode = document.createElement ("a"); document.getElementById ("uks" + päev) .appendChild (InternalNode); internalNode.innerHTML = päev; internalNode.href = "#"; kui ((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;   ;

8. samm “Uks” Objektid

Lõpuks peame 24-kordse ukse klassi alustama.

Selleks kasutame kohe kasutatavat funktsiooni väljendit, mis on siin üsna kasulik, sest me ei vaja muutujat, kuna me tahame ainult selle funktsiooni täitmist ühe funktsiooni sees.

Loome a uksed [] massiiv, mis hoiab 24 ukse objekti. Läbime läbi päevade vahemikus 1 kuni 24 (need on uste massiivi 0-23. Elemendid, kuna massiivid on nullpõhised) ja lõpuks tagastatakse kogu uksed [] massiiv, mis sisaldab 24 ukse objekti, et neid brauseris kuvada.

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

Demo
Allalaadimise allikas