Под изображението поставяме празен неуправен списък с “adventDoors” Идентификатор за селекция, който ще бъде попълнен от скриптовете. Ако потребителят не е активирал JavaScript в браузъра си, те ще виждат просто коледен образ.

            
 
Адвентен календар
  
 
     

Стъпка 3 - Попълнете “Съобщения” Array

Имаме нужда от 24 коледни котировки, за да запълним “съобщения” масив. Избрах моята от GoodReads.

Отвори скриптове / messages.js файл; ще поставим кавичките тук, за да ги държим отделно от функционалността. Най- съобщения масив е масив в масив, всеки елемент от външния масив съдържа друг масив с два елемента: цитат и неговия автор.

Попълнете масива с любимите си цитати според следния синтаксис:

 var messages = [["Цитат 1", "Автор 1"], ["Цитат 2", "Автор 2"],… ["Цитат 24", "Автор 24"]];

Стъпка 4 - Добавете CSS стилове за вратите

За да създадем необходимите CSS стилове за вратите, трябва да си представим окончателния дизайн, тъй като самите врати ще бъдат създадени с JavaScript в следните стъпки:.

Трябва да създадем 4 колони и 6 реда от правоъгълници в правилното подравняване. За това ще използваме позиция: относителна и позиция: абсолютна CSS правила. Тъй като точната позиция ще се промени вратата до вратата, ще добавим връх, дъно, наляво, и прав свойства в JavaScript, в CSS ние просто трябва да добавим относителна позиция към контейнера (нередовен списък в HTML), и абсолютни позиции за елементите на списъка (те ще бъдат добавени в JS, също).

Другото важно нещо в файла със стилове е създайте различен дизайн за състоянието на хората с увреждания и за активираните. Най- .хора с увреждания Селекторът ще бъде добавен към забранените от JavaScript.

За демо календара поставям бяла рамка и бели шрифтове за активираните врати с прозрачен бял фон при зависване; и светлозелена граница и шрифтове, както и прозрачен фон за инвалиди. Ако не ви харесва този дизайн, можете да промените цветовете и стиловете според желанието си.

Поставете следния код (или променените правила на стила) във вашия style.css досие.

 ul # adventDoors position: relative; стил в списъка: няма; пълнеж: 0; марж: 0;  #adventDoors li позиция: абсолютна;  #adventDoors li a цвят: #fff; ширина: 100%; височина: 100%; размер на шрифта: 24px; text-align: center; дисплей: Flex; гъвкава посока: колона; justify-content: център; текст-декорация: няма; граница: 1px #fff твърдо;  #adventDoors li a: not (.disabled): hover color: #fff; фонов цвят: прозрачен; фонов цвят: rgba (255,255,255,0.15);  #adventDoors li a.disabled border-color: # b6fe98; фонов цвят: rgba (196,254,171,0.15); цвят: # b6fe98; курсор: по подразбиране; 

Стъпка 5 - Създаване на глобалните променливи

От тази стъпка ще работим само с скриптове / calendar.js Файл, така че сега нека отворим това. Нашият Адвентски календар ще използва две глобални променливи.

Най- myCal променливата държи изображението на календара като JS обект. Изображението вече е добавено към index.html файл в Стъпка 2. Ние ще поставим вратите на това изображение в Стъпка 7. Ние улавяме свързания HTML елемент, маркиран с “adventCal” идентификатор с помощта на метода getElementById () DOM. Най- myCal променлива ще бъде HTMLImageElement DOM обект.

Най- текуща дата променливата съдържа текущата дата, така че нашият скрипт да може лесно да реши дали дадена врата трябва да бъде активирана или забранена. Да създам текуща дата създаваме нов обект от класа Date JavaScript.

Поставете следния кодов фрагмент в горната част на calendar.js досие.

 var myCal = document.getElementById ("adventCal"); var currentDate = new Дата ();

Стъпка 6 - Създайте “врата” клас

Тъй като имаме нужда от 24 врати, най-лесният начин да направите това е да създадете a “врата” клас, и по-късно да го инстанцирате 24 пъти.

Класът „Врата” има два параметъра, календар и ден. За календар параметър ще трябва да премине коледен образ, който ще функционира като фон. За ден параметър ще трябва да премине текущия ден на декември под формата на цяло число.

Ще преминем точните стойности на параметрите в последната стъпка (Стъпка 8), по време на инстанцирането на 24-те врати.

Ще направим 5 свойства и 1 метод за клас Врата. В тази стъпка ще преминем само през петте свойства и ще обясня съдържание () метод в следващата стъпка.

Най- “широчина” & “височина” Имоти

Най- широчина и височина свойства динамично изчисляват ширината и височината на всяка отделна врата (която се променя в зависимост от ширината и височината на фоновото изображение).

Умножителите с 0,1 и 0,95 са в уравнението, за да оставят пространство за полетата, между всяка врата и около страните на календара..

Най- “adventMessage” Имот

Най- adventMessage притежава съдържанието на предупредителните съобщения, а именно цитати и съответстващите им автори messages.js файлът се задържа. Най- adventMessage собственост взема цитат и автор от съобщения [] масив, в зависимост от текущата дата.

За 1 декември adventMessage свойството отнема първия елемент от външния масив, който е съобщения [0], като масиви са нулеви базирани в JavaScript.

По същата причина, котировката за 1 декември се позиционира като съобщения [0] [0] (първият елемент от вътрешния масив) и съответният автор може да бъде достигнат като съобщения [0] [1] (втори елемент от вътрешния масив).

Най- “х”&”ш” Имоти

Имоти х и ш дръжте правилните позиции на всяка врата, които ще използваме в следващата стъпка, за да настроите връх и наляво CSS свойства. Те ще допълват позиция: относителна и позиция: абсолютна CSS правила, които сме задали в Стъпка 4 за контейнера на вратата (ul # adventDoors) и самите врати (#adventDoors li). Изчисленията може да изглеждат малко смущаващи, но нека да преминем бързо през тях.

Най- х ще се използва от наляво Свойство за позициониране на CSS в следващата стъпка (стъпка 7). Той определя в пиксели, където отделна Врата трябва да бъде поставена на оста х.

Той заема ширината на фоновото изображение и оставя малко поле за него (4%). След това с помощта на остатъчния оператор оценява в коя колона ще бъде поставен (не забравяйте, че ще има 4 колони) и накрая добавя малко (10%) марж на всяка отделна Врата с помощта на 1.1.

По същия начин, ш ще се използва от връх Свойство за позициониране на CSS, и също така определя в пиксели, където трябва да бъде поставена отделна Врата на оста Y.

Вземаме височината на фоновото изображение с помощта на височината на предаваното календар параметър (който съдържа DOM-обект) и оставя 4% марж около вертикалните страни на календара.

След това, с помощта на метода Math.floor (), ние изчисляваме в кой ред ще бъде даден обект Door (ще има 6 реда).

Накрая добавяме 10% марж за всеки обект Door, като умножим неговата височина, използвайки 1.1 множител.

 функция Врата (календар, ден) this.width = ((calendar.width - 0.1 * calendar.width) / 4) * 0.95; this.height = ((calendar.height - 0.1 * calendar.height) / 6) * 0.95; this.adventMessage = 'Ден' + ден + 'на Адвент n' + '"' + съобщения [ден - 1] [0] + '" \ t - 1] [1] + '\ t this.x = (0.04 * calendar.width + ((ден - 1)% 4) * (1.1 * this.width)); this.y = - (0.96 * calendar.height - Math.floor ((ден - 1) / 4) * (1.1 * this.height)); this.content = function () …; 

Стъпка 7 - Попълнете “Content ()” метод

Това е съдържание () метод, който ще покаже вратите ни в браузъра. Първо, създаваме нов DOM възел с помощта на променливата възел което ще създаде

 this.content = function () var node = document.createElement ("li"); document.getElementById ( "adventDoors") appendChild (възел). node.id = "врата" + ден; node.style.cssText = "ширина:" + this.width + "px; height:" + this.height + "px; top:" + this.y + "px; left:" + this.x + "px "; var innerNode = document.createElement ("a"); document.getElementById ("врата" + ден) .appendChild (internalNode); innerNode.innerHTML = ден; innerNode.href = "#"; ако ((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;   ;

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