Під зображенням розміщується порожній невпорядкований список з “adventDoors” селектор id, який буде заповнено скриптами. Якщо у вашому веб-переглядачі не ввімкнено JavaScript, вони побачать просте зображення Різдва.

            
 
Календар Адвенту
  
 
     

Крок 3 - Заповнюйте “Повідомлення” Масив

Нам потрібно 24 Різдвяні цитати для заповнення “повідомлень” масив. Я вибрав мій від GoodReads.

Відкрийте вікно scripts / messages.js файл; ми розміщуємо котирування тут, щоб вони були відокремлені від функціональних можливостей. The повідомлень масив є масивом всередині масиву, кожен елемент зовнішнього масиву містить інший масив з двома елементами: цитатою і її автором.

Заповнюйте масив улюбленими цитатами відповідно до наступного синтаксису:

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

Крок 4 - Додайте основні стилі CSS для дверей

Для створення необхідних стилів CSS для дверей нам потрібно уявити остаточний дизайн, оскільки самі двері будуть створені за допомогою JavaScript у наступних кроках..

Ми повинні створити 4 колонки і 6 рядків прямокутників у правильному вирівнюванні. Для цього скористаємося позиція: відносна і позиція: абсолютна Правила CSS. Оскільки точне положення змінить двері на двері, ми додамо зверху, знизу, зліва, і право Властивості в JavaScript, в CSS нам просто потрібно додати відносну позицію до контейнера (невпорядкований список в HTML), а абсолютні позиції для елементів списку (вони будуть додані в JS, теж) \ t.

Інша важлива річ у файлі таблиці стилів: створити інший дизайн для відключених і увімкнутих станів. The .вимкнено селектор буде додано до вимкненого JavaScript.

Для мого демо-календаря я встановлюю тверду білу рамку і білі шрифти для ввімкнених дверей з прозорим білим фоном при зависанні; і світло-зелений кордон, і шрифти, і прозорий фон для інвалідів. Якщо вам не подобається цей дизайн, ви можете змінити кольори та стилі відповідно до вашого бажання.

Помістіть наступний код (або ваші модифіковані правила стилю) у ваш style.css файл.

 ul # adventDoors position: relative; список-стиль: немає; заповнення: 0; маржа: 0;  #adventDoors li position: absolute;  #adventDoors li a color: #fff; ширина: 100%; висота: 100%; розмір шрифту: 24px; text-align: center; дисплей: flex; flex-direction: колонка; 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; cursor: default; 

Крок 5 - Створення глобальних змінних

З цього кроку ми працюватимемо лише з scripts / calendar.js Файл, так що тепер давайте відкриємо це. Наш календар адвентів використовуватиме дві глобальні змінні.

The myCal змінна містить зображення календаря як об'єкт JS. Зображення вже додано до index.html Файл на Кроці 2. Ми розмістимо двері на цьому зображенні на Кроці 7. Ми захопимо пов'язаний HTML елемент, позначений знаком “adventCal” ідентифікатора за допомогою методу getElementById () DOM. The myCal змінною буде об'єкт DOM HTMLImageElement.

The Поточна дата змінна містить поточну дату, щоб наш скрипт легко вирішив, чи потрібно вмикати або вимикати двері. Створювати Поточна дата ми створюємо новий об'єкт класу Date JavaScript.

Покладіть наступний фрагмент коду на верх calendar.js файл.

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

Крок 6 - Створіть “Двері” Клас

Оскільки нам потрібні 24 двері, найпростіший спосіб зробити це - створити a “Двері” класу, а пізніше інстанціювати його 24 рази.

Наш клас Дверей має два параметри, календар і день. Для календар параметр нам потрібно буде передати зображення Різдва, яке буде функціонувати як фон. Для день параметр нам потрібно буде передати поточний день грудня у вигляді цілого числа.

Точні значення параметрів ми передамо в останньому кроці (крок 8), під час інсталяції об'єктів 24 Door.

Ми зробимо 5 властивостей і 1 метод для класу дверей. На цьому етапі ми будемо проходити тільки через 5 властивостей, і я поясню вміст () на наступному етапі.

The “ширина” & “висота” властивості

The ширина і висота властивості динамічно обчислюють ширину та висоту кожної окремої двері (що змінюється відповідно до ширини та висоти фонового зображення).

Мультиплікатори 0,1 і 0,95 знаходяться в рівнянні, щоб залишити простір для полів, між кожними дверима і навколо сторін календаря,.

The “adventMessage” власності

The adventMessage Власність містить вміст попереджувальних повідомлень, а саме цитати та відповідні автори, які є нашими messages.js файл утримується. The adventMessage власність приймає цитату і автора з повідомлень [] масив, залежно від поточної дати.

Для 1 грудня adventMessage Властивість приймає перший елемент зовнішнього масиву, який є повідомлення [0], як масиви базуються на нулі в JavaScript.

З тієї ж причини, позиція для 1 грудня позиціонується як повідомлення [0] [0] (перший елемент внутрішнього масиву), а дорівнюючий автор може бути досягнутий як повідомлення [0] [1] (другий елемент внутрішнього масиву).

The “x”&”y” властивості

Властивості x і y утримуйте правильні позиції кожної двері, які ми будемо використовувати в наступному кроці для встановлення зверху і зліва Властивості CSS. Вони доповнять позиція: відносна і позиція: абсолютна Правила CSS, які ми встановлюємо на Кроці 4 для контейнера для дверей (ul # adventDoors), і самі двері (#adventDoors li). Розрахунки можуть здаватися дещо залякувальними, але давайте підемо швидко через них.

The x власність буде використовуватися зліва Властивість визначення CSS у наступному кроці (етап 7). Він визначає в пікселях, де окремі двері повинні бути розміщені на осі абсцис.

Він приймає ширину фонового зображення, і залишає для нього невелику маржу (4%). Потім за допомогою оператора, що залишився, він оцінює, у якому стовпці він буде розміщений (пам'ятайте, що буде 4 стовпці), і, нарешті, додає невелику (10%) маржу кожній окремій двері за допомогою множника.

Точно так само y власність буде використовуватися зверху Властивість позиціонування CSS, а також визначає в пікселях, де окремі двері повинні бути розміщені на осі y.

Візьмемо висоту фонового зображення за допомогою властивості висоти переданого календар параметр (який містить DOM-об'єкт), і залишити край 4% навколо вертикальних сторін календаря.

Потім, за допомогою методу Math.floor () обчислимо, у якому рядку буде заданий об'єкт Door (буде 6 рядків).

Нарешті, ми додаємо 10% -ну маржу для кожного об'єкта "Двері", помноживши її висоту, використовуючи множник 1.1.

 функція Door (календар, день) 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 - Заповнюйте “Вміст ()” Метод

Це вміст () метод, який буде відображати наші двері в браузері. Перш за все, ми створюємо новий вузол DOM за допомогою змінної вузол що створить

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