A kép alatt egy üres, rendezetlen listát helyezünk el a “adventDoors” id szelektor, amelyet a szkriptek adnak meg. Ha a felhasználónak nincs engedélyezve a böngészőjében a JavaScript, csak egy egyszerű karácsonyi képet fog látni.

            
 
Adventi naptár
  
 
     

3. lépés - Adja meg a “üzenetek” Sor

24 karácsonyi idézetre van szükségünk a “üzenetek” sor. A GoodReads-ből választottam az enyém.

Nyissa meg a scripts / messages.js fájlba; az idézőjeleket itt helyezzük el, hogy elkülönítsük őket a funkcionalitástól. A üzenetek A tömb egy tömbben van egy tömbben, a külső tömb mindegyik eleme egy másik tömböt tartalmaz, amely két elemet tartalmaz: egy idézetet és annak szerzőjét.

Adja meg a tömböt kedvenc árajánlataival az alábbi szintaxis szerint:

 var messages = [["Idézet 1", "Szerző 1"], ["Idézet 2", "Szerző 2"],… ["Idézet 24", "Szerző 24"]];

4. lépés - Add hozzá az alapvető CSS-stílusokat az ajtókhoz

Ahhoz, hogy az ajtókhoz szükséges CSS-stílusokat hozzuk létre, el kell képzelnünk a végső tervezést, mivel maguk az ajtók a JavaScript segítségével jönnek létre az alábbi lépésekben.

4 oszlopot és 6 sor téglalapot kell létrehoznunk a megfelelő irányban. Ehhez használjuk a pozíció: relatív és a pozíció: abszolút CSS szabályok. Mivel a pontos pozíció ajtónként változik, hozzáadjuk a felső, alsó, balra, és jobb tulajdonságai a JavaScript-ben, a CSS-ben csak hozzá kell adnunk egy relatív pozíciót a tárolóhoz (nem rendezett lista a HTML-ben), és abszolút pozíciókat a listaelemekhez (ezeket a JS-ben is hozzáadjuk).

A másik fontos dolog a stíluslap fájlban hozzon létre egy másik tervet a fogyatékkal élő és az engedélyezett állapotok számára. A .Tiltva A szelektor hozzáadásra kerül a fogyatékkal élők számára a JavaScript segítségével.

A demónaptáromhoz egy fehér, fehér szegélyt és fehér betűtípust állítottam be az engedélyezett ajtók számára átlátszó fehér háttérrel a lebegésben; és egy világosbarna szegély és betűtípusok, valamint egy átlátszó világos háttér a fogyatékkal élők számára. Ha nem tetszik ez a kialakítás, megváltoztathatja a színeket és a stílusokat a kívánsága szerint.

Helyezze a következő kódot (vagy a módosított stílusszabályokat) a style.css fájl.

 ul # advent Doors pozíció: relatív; list-style: nincs; párnázás: 0; margin: 0;  #adventDoors li pozíció: abszolút;  #adventDoors li a color: #fff; szélesség: 100%; magasság: 100%; betűméret: 24px; szöveg-igazítás: központ; kijelző: flex; flex-irány: oszlop; indokolja a tartalmat: központ; szöveg-dekoráció: nincs; határ: 1px #fff szilárd;  #adventDoors li a: nem (.disabled): hover color: #fff; háttérszín: átlátszó; háttérszín: rgba (255,255,255,0,15);  #adventDoors li a.disabled border-color: # b6fe98; háttérszín: rgba (196,254,171,0,15); szín: # b6fe98; kurzor: alapértelmezett; 

5. lépés - A globális változók létrehozása

Ebből a lépésből csak az scripts / calendar.js fájl, így most nyissuk meg ezt. Adventi naptárunk két globális változót fog használni.

A myCal A változó a naptárképet JS objektumként tartja. A kép már hozzá lett adva a index.html A 7. lépésben elhelyezzük az ajtókat erre a képre. A kapcsolódó HTML-t rögzítjük elemgel jelölt elem “adventCal” azonosító a getElementById () DOM módszer használatával. A myCal változó HTMLImageElement DOM objektum lesz.

A mostani dátum A változó az aktuális dátumot tartalmazza, így a szkriptünk könnyen eldöntheti, hogy engedélyezhető-e vagy sem. Készíteni mostani dátum a Date JavaScript osztály új objektumát jelenítjük meg.

Tegye a következő kódrészletet a tetejére calendar.js fájl.

 var myCal = document.getElementById ("adventCal"); var currentDate = új dátum ();

6. lépés - Hozza létre a “Ajtó” Osztály

Mivel 24 ajtóra van szükségünk, a legegyszerűbb módja ennek a “Ajtó” osztályt, majd 24-szeresebbé tesszük.

Ajtó osztályunknak két paramétere van, naptár és nap. A naptár paramétert kell átadnunk a háttérképként működő karácsonyi képnek. A nap paramétert kell átadni a decemberi napnak egész szám formájában.

A paraméterek pontos értékeit az utolsó lépésben továbbítjuk (8. lépés), a 24 ajtó objektum megjelenése során.

5 tulajdonságot és 1 módszert fogunk készíteni az ajtóosztály számára. Ebben a lépésben csak az 5 tulajdonságon megyünk keresztül, és megmagyarázom tartalom() a következő lépésben.

A “szélesség” & “magasság” tulajdonságok

A szélesség és magasság a tulajdonságok dinamikusan kiszámítják az egyes ajtók szélességét és magasságát (ami a háttérkép szélességének és magasságának megfelelően változik).

A 0,1 és 0,95 szorzók az egyenletben vannak, hogy néhány helyet hagyjanak a margók, az egyes ajtók és a naptár oldalai között is..

A “adventMessage” ingatlan

A adventMessage a tulajdon a riasztási üzenetek tartalmát, nevezetesen az idézeteket és a megfelelő szerzőket tartalmazza messages.js a fájl megmarad. A adventMessage az ingatlan idézetet és egy szerzőt vesz fel a üzenetek[] tömb, az aktuális dátumtól függően.

Az 1. dec adventMessage a tulajdonság a külső tömb első elemét veszi fel üzenetek [0], mivel a tömbök nulla alapúak a JavaScript-ben.

Ugyanezen oknál fogva az 1. dec üzenetek [0] [0] (a belső tömb első eleme), és a megfelelő szerző elérhetõ üzenetek [0] [1] (a belső tömb második eleme).

A “x”&”y” tulajdonságok

Tulajdonságok x és y tartsuk meg az ajtók megfelelő pozícióit, amelyeket a következő lépésben használunk a felső és balra CSS tulajdonságok. Ezek kiegészítik a pozíció: relatív és pozíció: abszolút CSS szabályok, amelyeket a 4. lépésben az ajtókonténerhez (ul # adventDoors) és magukhoz az ajtókhoz (#adventDoors li) állítottunk be. A számítások kissé megfélemlítőnek tűnhetnek, de gyorsan menjünk át rajtuk.

A x a balra CSS pozicionálási tulajdonság a következő lépésben (7. lépés). Meghatározza azokat a pixeleket, ahol egy egyedi ajtót kell elhelyezni az x tengelyen.

Ez a háttérkép szélességét veszi figyelembe, és kis mozgásteret hagy neki (4%). Ezután a fennmaradó operátor segítségével felméri, hogy melyik oszlopban lesz elhelyezve (ne feledje, hogy 4 oszlop lesz), és végül hozzáad egy kis (10%) margót minden egyes ajtóhoz egy 1,1 szorzó használatával.

Ugyanígy, a y a felső A CSS pozicionálási tulajdonsága, és a pixelekben is meghatározza, hogy egy egyedi ajtót kell elhelyezni az y tengelyen.

A háttérkép magasságát az átadott magasság tulajdonsága segítségével vesszük naptár paraméter (amely DOM-objektumot tartalmaz), és 4% -os margót hagy a naptár függőleges oldalai körül.

Ezután a Math.floor () módszer segítségével kiszámítjuk, hogy melyik sorban lesz egy adott ajtó objektum (6 sor lesz).

Végül hozzáadunk egy 10% -os margót minden ajtó objektumhoz úgy, hogy a magasságát egy 1,1 szorzóval megszorozzuk.

 funkció Ajtó (naptár, nap) this.width = ((calendar.width - 0,1 * calendar.width) / 4) * 0,95; this.height = ((calendar.height - 0,1 * calendar.height) / 6) * 0,95; this.adventMessage = 'Advent' '' napja '+ nap +' n '+' "'+ üzenetek [nap - 1] [0] +'" n " - 1] [1] + 'n'; this.x = (0,04 * calendar.width + ((nap - 1)% 4) * (1,1 * ez a szélesség)); this.y = - (0.96 * calendar.height - Math.floor ((nap - 1) / 4) * (1,1 * ez a fény)); this.content = függvény () …; 

7. lépés - A “Tartalom()” Eljárás

Ez a tartalom() módszer, amely a böngészőben megjeleníti az ajtóinkat. Először is, létrehozunk egy új DOM csomópontot a változó segítségével csomópont ami létrehozza a

 this.content = függvény () var node = document.createElement ("li"); document.getElementById ( "adventDoors"). AppendChild (csomópont); node.id = "ajtó" + nap; node.style.cssText = "szélesség:" + ez.szélesség + "px; magasság:" + ez.magasság + "px; top:" + ez.y ​​+ "px; "; var internalNode = document.createElement ("a"); document.getElementById ("ajtó" + nap) .appendChild (InternalNode); internalNode.innerHTML = nap; internalNode.href = "#"; ha ((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;   ;

 (függvény () var doors = []; mert (var i = 0; i < 24; i++)  doors[i] = new Door(myCal, i + 1); doors[i].content();  return doors; )();