Ниже изображения мы размещаем пустой неупорядоченный список с “adventDoors” Селектор идентификатора, который будет заполнен сценариями. Если пользователь не включил JavaScript в своем браузере, он просто увидит простое рождественское изображение.

            
 
Календарь появления
  
 
     

Шаг 3 - Заполните “Сообщения” массив

Нам нужно 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 позиция: относительная; стиль списка: нет; отступы: 0; поле: 0;  #adventDoors li position: absolute;  #adventDoors li a color: #fff; ширина: 100%; высота: 100%; размер шрифта: 24 пикселя; выравнивание текста: по центру; дисплей: гибкий; flex-direction: столбец; justify-content: центр; текстовое оформление: нет; граница: 1px #fff solid;  #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,05); цвет: # b6fe98; курсор: по умолчанию; 

Шаг 5 - Создание глобальных переменных

Начиная с этого шага, мы будем работать только с скрипты / calendar.js файл, так что теперь давайте откроем это. Наш календарь событий будет использовать две глобальные переменные.

myCal переменная содержит изображение календаря как объект JS. Изображение уже добавлено в index.html файл в шаге 2. Мы поместим двери на это изображение в шаге 7. Мы захватим соответствующий HTML элемент отмечен “adventCal” идентификатор с помощью метода DOM getElementById (). myCal переменная будет объектом HTMLImageElement DOM.

текущая дата переменная содержит текущую дату, так что наш скрипт может легко решить, должна ли дверь быть включена или отключена. Создавать текущая дата мы создаем новый объект класса JavaScript для даты.

Поместите следующий фрагмент кода в верхнюю часть вашего calendar.js файл.

 var myCal = document.getElementById ("adventCal"); var currentDate = new Date ();

Шаг 6 - Создайте “Дверь” Учебный класс

Поскольку нам нужно 24 двери, самый простой способ сделать это - создать “Дверь” класс, а затем создать его экземпляр 24 раза.

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

Мы передадим точные значения параметров на последнем шаге (шаг 8), во время создания 24 объектов Door.

Мы сделаем 5 свойств и 1 метод для класса Door. На этом шаге мы рассмотрим только 5 свойств, и я объясню Содержание () метод в следующем шаге.

“ширина” & “рост” свойства

ширина а также рост Свойства динамически рассчитывают ширину и высоту каждой отдельной двери (которая изменяется в зависимости от ширины и высоты фонового изображения).

Множители 0,1 и 0,95 находятся в уравнении, чтобы оставить некоторое пространство для полей, между каждой дверью и вокруг сторон календаря..

“adventMessage” имущество

adventMessage свойство содержит содержимое сообщений оповещения, а именно кавычки и соответствующие авторы, которые наши messages.js файл держит. adventMessage собственность берет цитату и автора из Сообщения[] массив, в зависимости от текущей даты.

На 1 декабря adventMessage свойство принимает первый элемент внешнего массива, который Сообщения [0], так как массивы начинаются с нуля в JavaScript.

По той же причине, цитата на 1 декабря позиционируется как Сообщения [0] [0] (первый элемент внутреннего массива), и соответствующий автор может быть достигнут как Сообщения [0] [1] (второй элемент внутреннего массива).

“Икс”&”Y” свойства

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

Икс свойство будет использоваться оставил Свойство позиционирования CSS на следующем шаге (шаг 7). Он определяет в пикселях, где отдельная дверь должна быть размещена на оси X.

Он принимает ширину фонового изображения и оставляет для него небольшой запас (4%). Затем с помощью оператора остатка он оценивает, в какой столбец он будет помещен (помните, что будет 4 столбца), и, наконец, добавляет небольшой (10%) запас к каждой отдельной двери, используя множитель 1.1..

Точно так же Y свойство будет использоваться Топ 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 = 'Day' + day + 'Advent \ n \ n' + '"' + messages [day - 1] [0] + '" \ n \ n \ t' + 'by' + messages [day - 1] [1] + '\ n \ n'; 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; высота:" + this.height + "px; верх:" + this.y + "px; слева:" + this.x + "px ; "; var innerNode = document.createElement ("a"); document.getElementById ("дверь" + день) .appendChild (innerNode); innerNode.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 = []; для (var i = 0; i < 24; i++)  doors[i] = new Door(myCal, i + 1); doors[i].content();  return doors; )();