Как создать простой календарь событий в JavaScript
Адвент – это период ожидания и подготовки к Рождеству, который начинается за четыре воскресенья до Рождества. Время Адвента традиционно измеряется с помощью Календаря Адвента или Венка Адвента. Хотя начало Адвента не является фиксированной датой, Календари Адвента обычно начинаются 1 декабря.
Исходя из местных обычаев, Календари Адвента могут иметь различный дизайн, но чаще всего они принимают форму больших прямоугольных карточек с 24 окнами или дверями, отмечающими дни между 1 и 24 декабря. Двери скрывают сообщения, стихи, молитвы или небольшие сюрпризы.
В этой статье я покажу вам, как создать календарь событий в объектно-ориентированном JavaScript. Так как это сделано в обычном JavaScript, вы можете легко разместить код на своем собственном веб-сайте.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
JavaScript Calendar Design
У нашего Календаря Адвента будет 24 двери на рождественском фоне. Каждая дверь будет скрывать новогоднюю цитату, которая будет появляться в виде сообщения с предупреждением, когда пользователь нажимает на дверь. Двери остаются закрытыми до наступления данного дня, как это происходит в реальной жизни. двери не могут быть открыты до нужного дня.
Двери, которые уже включены, будут иметь границы и цвет фона (белый), чем отключенные (светло-зеленый). Мы будем использовать HTML5, CSS3 и JavaScript для подготовки нашего Календаря Адвента, который выглядит примерно так:
Шаг 1 – Создание файловой структуры и ресурсов
Прежде всего, нам нужно выбрать красивое фоновое изображение. Я выбрал один с портретной ориентацией из Pixabayмой календарь будет содержать 4 столбца и 6 строк.
Это хорошо, если вы предпочитаете альбомную ориентацию. Просто измените положение дверей в коде JavaScript, так как у вас будет 6 столбцов и 4 строки. Если у вас есть изображение, создайте папку с именем / images и сохраните ее.
Это будет наш единственный ресурс изображений для этого проекта.
Для файлов JavaScript создайте папку / scripts внутри вашей корневой папки. Поместите в него два пустых текстовых файла и назовите их calendar.js и messages.js. Calendar.js будет содержать функциональность, а messages.js будет содержать массив сообщений, которые появляются, когда пользователь «открывает» (щелкает) двери.
Нам также понадобятся файлы HTML и CSS, поэтому создайте два пустых файла в корневой папке и присвойте им имена index.html и style.css.
Когда вы будете готовы, у вас есть ресурсы и структура файлов, которые вам понадобятся для выполнения этого проекта, и ваша корневая папка будет выглядеть примерно так:
Шаг 2 – Создание HTML
HTML-код, который мы используем, довольно прост. Таблица стилей CSS связана в
раздел, в то время как два файла JavaScript включены в нижней части раздел. Последнее необходимо, потому что если мы поместим сценарии в раздел, код не будет выполнен, так как он использует элементы загруженной HTML-страницы.Сам календарь Адвента находится внутри
<
article> семантический тег Мы загружаем рождественское изображение как HTML-элемент, а не как фоновое свойство CSS, потому что таким образом мы можем легко получить к нему доступ как к элементу DOM.
Ниже изображения мы размещаем пустой неупорядоченный список с селектором идентификатора «adventDoors», который будет заполняться сценариями. Если у пользователя не включен JavaScript в его браузере, он просто увидит простое рождественское изображение.
<!-- Mobile-friendly viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Style sheet link -->
<link href="https://www.hongkiat.com/style.css" rel="stylesheet" media="all">
</head>
<body>
<article>
<h1>Календарь появления</h1>
<img src="advent-calendar-javascript/background.jpg" alt="Календарь появления" id="adventCal">
<ul id="adventDoors"></ul>
</article>
<!-- Scripts -->
<script src="scripts/messages.js"></script>
<script src="scripts/calendar.js"></script>
</body>
Шаг 3 – Заполните массив «Сообщения»
Нам нужно 24 рождественские цитаты, чтобы заполнить массив «сообщений». Я выбрал свой из GoodReads,
Откройте файл scripts / messages.js; мы разместим здесь цитаты, чтобы отделить их от функциональности. Массив messages представляет собой массив внутри массива, каждый элемент внешнего массива содержит другой массив с двумя элементами: кавычка и ее автор.
Заполните массив вашими любимыми кавычками в соответствии со следующим синтаксисом:
var messages = [
[“Quote 1”, “Author 1”],
[“Quote 2”, “Author 2”],
…
[“Quote 24”, “Author 24”]
];
Шаг 4 – Добавить основные стили CSS для дверей
Для создания необходимых стилей CSS для дверей нам нужно представить окончательный дизайн, так как сами двери будут созданы с использованием JavaScript в следующих шагах.
Нам нужно создать 4 столбца и 6 рядов прямоугольников в правильном выравнивании. Для этого мы будем использовать положение: относительный и положение: абсолютные правила CSS. Поскольку точная позиция будет меняться от двери к двери, мы добавим свойства top, bottom, left и right в JavaScript, в CSS нам просто нужно добавить относительную позицию в контейнер (неупорядоченный список в HTML), и абсолютные позиции для элементов списка (они также будут добавлены в JS).
Другая важная вещь в файле таблицы стилей – это создание другого дизайна для отключенных и включенных состояний. Селектор .disabled будет добавлен в отключенный JavaScript.
Для своего демонстрационного календаря я установил сплошную белую рамку и белые шрифты для включенных дверей с прозрачным белым фоном при зависании; и светло-зеленая рамка, и шрифты, и прозрачный светло-зеленый фон для инвалидов. Если вам не нравится этот дизайн, вы можете изменить цвета и стили в соответствии с вашими пожеланиями.
Поместите следующий код (или ваши измененные правила стиля) в ваш файл style.css.
ul # adventDoors {
положение: относительное;
стиль списка: нет;
отступы: 0;
поле: 0;
}
#adventDoors li {
положение: абсолютное;
}
#adventDoors li a {
цвет: #fff;
ширина: 100%;
высота: 100%;
размер шрифта: 24 пикселя;
выравнивание текста: по центру;
дисплей: гибкий;
flex-direction: столбец;
justify-content: центр;
текстовое оформление: нет;
граница: 1px #fff solid;
}
#adventDoors li a: not (.disabled): hover {
цвет: #fff;
цвет фона: прозрачный;
цвет фона: rgba (255,255,255,0,15);
}
#adventDoors li a.disabled {
цвет границы: # b6fe98;
цвет фона: rgba (196,254,171,0.15);
цвет: # b6fe98;
курсор: по умолчанию;
}
Шаг 5 – Создание глобальных переменных
На этом этапе мы будем работать только с файлом scripts / calendar.js, поэтому теперь давайте откроем это. Наш календарь событий будет использовать две глобальные переменные.
Переменная myCal содержит изображение календаря как объект JS. Изображение уже было добавлено в файл index.html на шаге 2. Мы поместим двери на это изображение на шаге 7. Мы захватим соответствующий HTML элемент, помеченный идентификатором «adventCal» с помощью getElementById () DOM метод. Переменная myCal будет HTMLImageElement DOM объект.
Переменная currentDate содержит текущую дату, поэтому наш скрипт может легко решить, следует ли включить или отключить дверь. Для создания currentDate мы создаем новый объект Свидание Класс JavaScript.
Поместите следующий фрагмент кода в верхнюю часть вашего файла calendar.js.
var myCal = document.getElementById (“adventCal”);
var currentDate = new Date ();
Шаг 6 – Создайте класс «Дверь»
Поскольку нам нужно 24 двери, самый простой способ сделать это – создать класс «Дверь», а затем создать его экземпляр 24 раза.
Наш класс дверей имеет два параметра, календарь и день. Для параметра календаря нам нужно будет передать изображение Рождества, которое будет работать в качестве фона. Для параметра дня нам нужно будет передать текущий день декабря в виде целого числа.
Мы передадим точные значения параметров на последнем шаге (шаг 8), во время создания 24 объектов Door.
Мы сделаем 5 свойств и 1 метод для класса Door. На этом шаге мы рассмотрим только 5 свойств, а на следующем шаге я объясню метод content ().
Свойства «ширина» и «высота»
Свойства width и height динамически рассчитывают ширину и высоту каждой отдельной двери (которая изменяется в зависимости от ширины и высоты фонового изображения).
Множители 0,1 и 0,95 находятся в уравнении, чтобы оставить некоторое пространство для полей, между каждой дверью и вокруг сторон календаря.
Свойство adventMessage
Свойство adventMessage содержит содержимое сообщений с предупреждениями, а именно кавычки и соответствующих авторов, которые содержатся в нашем файле messages.js. Свойство adventMessage принимает цитату и автора из сообщений[] массив, в зависимости от текущей даты.
Для 1 декабря свойство adventMessage принимает первый элемент внешнего массива, который является сообщениями[0], так как массивы начинаются с нуля в JavaScript.
По той же причине цитата на 1 декабря позиционируется как сообщения[0][0] (первый элемент внутреннего массива), и соответствующий автор может быть достигнут как сообщения[0][1] (второй элемент внутреннего массива).
Свойства «x» и «y»
Свойства x и y содержат правильные положения каждой двери, которые мы будем использовать на следующем шаге, чтобы установить верхний и левый свойства CSS. Они будут дополнять позиции: относительные и позиции: абсолютные правила CSS, которые мы установили на шаге 4 для контейнера дверей (ul # adventDoors) и самих дверей (#adventDoors li). Расчеты могут показаться несколько пугающими, но давайте быстро рассмотрим их.
Свойство x будет использоваться левым свойством позиционирования CSS на следующем шаге (шаг 7). Он определяет в пикселях, где отдельная дверь должна быть размещена на оси X.
Он принимает ширину фонового изображения и оставляет небольшое поле для него (4%). Затем с помощью оператор остатка, он оценивает, в какой столбец он будет помещен (помните, что будет 4 столбца), и, наконец, добавляет небольшой (10%) запас к каждой отдельной двери, используя множитель 1.1.
Точно так же свойство y будет использоваться верхним свойством CSS-позиционирования, и оно также определяет в пикселях, где отдельная дверь должна быть размещена на оси Y.
Мы берем высоту фонового изображения с помощью свойства height переданного в календаре параметра (который содержит 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’ + ‘”‘ +
Сообщения[day – 1][0] + ‘” n n t’ + ‘by’ +
Сообщения[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 – Заполните метод «Content ()»
Это метод content (), который отображает наши двери в браузере. Прежде всего, мы создаем новый узел DOM с помощью узла переменных, который создаст
Так как класс Door будет создан 24 раза в цикле for на следующем шаге (шаг 8), это означает, что у нас будет 24
node.id Свойство в следующей строке добавляет уникальный селектор идентификатора к каждому элементу списка (двери). Нам понадобится это, чтобы иметь возможность правильно проходить по дням на следующем шаге (шаг 8). Таким образом, дверь 1 будет иметь идентификатор = “door1”, дверь 2 будет иметь идентификатор = “дверь 2” и т. Д.
node.style.cssText Свойство в следующей строке добавляет некоторые правила CSS к каждому элементу списка (двери) с помощью атрибута HTML style = ”…”, который используется для включения встроенного CSS в файлы HTML. Свойство node.style.cssText использует свойства класса Door, которые мы установили на предыдущем шаге (шаг 6).
Чтобы сделать наш объект Doorable кликабельным, нам также нужно добавить тег внутри элементов списка. Мы достигаем этого с помощью переменной innerNode, которую мы привязываем как дочерний элемент к соответствующему элементу списка, идентифицированному дверью id = ”[i]Селектор (с [i] номер дня), используя AppendChild () Метод DOM, как и раньше.
innerHTML свойство в следующей строке отображает текущий день (1-24) поверх двери в браузере, и мы также добавляем атрибут href = ”#” к нашим тегам привязки с помощью HREF DOM недвижимость.
Наконец, в операторе if-else мы оцениваем, должен ли объект Door быть включен или отключен. Сначала мы проверяем, находимся ли мы в 12-м месяце года (декабрь), используя getMonth () метод объекта Date. Нам нужно добавить 1, потому что getMonth () начинается с нуля (январь – месяц 0 и т. Д.).
После этого мы проверяем, меньше ли текущая дата, хранящаяся в глобальной переменной currentDate, которую мы установили на шаге 5, в день, который представляет текущий объект Door.
Если это не декабрь, или день, представленный данной Дверью, больше текущей даты, Дверь следует отключить, во всех других случаях ее необходимо включить, чтобы пользователи могли щелкнуть по ней и увидеть соответствующее сообщение Адвента.
Если Дверь отключена, мы добавляем селектор класса = «отключен» к данному тегу привязки с помощью имя класса имущество. Помните, что мы уже стилизовали класс .disabled с помощью CSS на шаге 4. Нам также нужно установить по щелчку HTML-атрибут события для возврата false.
Если дверь находится во включенном состоянии, мы добавляем свойство adventMessage к предупреждающему сообщению и помещаем его в по щелчку Атрибут события HTML.
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; left:” + this.x + “px;”;
var innerNode = document.createElement (“a”);
document.getElementById (“дверь” + день) .appendChild (innerNode);
innerNode.innerHTML = день;
innerNode.href = “https://www.hongkiat.com/#”;
if ((currentDate.getMonth () + 1) <12 || currentDate.getDate () <день) { innerNode.className = "disabled"; innerNode.onclick = function () { вернуть ложь; } } еще { var adventMessage = this.adventMessage; innerNode.onclick = function () { оповещения (adventMessage); вернуть ложь; } } };
Шаг 8 – Инициализация объектов «Дверь»
Наконец, нам нужно инициализировать класс Door 24 раза.
Для этого мы используем выражение немедленного вызова функции, которое здесь очень полезно, потому что нам не нужна переменная, поскольку мы хотим выполнить код внутри функции только один раз.
Мы создаем двери[] массив, который будет содержать 24 объекта Двери. Мы перебираем дни с 1 по 24 (они будут 0-23-м элементами дверей[] массив, так как массивы начинаются с нуля), и, наконец, вернуть целые двери[] массив, включающий 24 объекта Door для отображения их в браузере.
(function () {
вар двери = [];
для (var i = 0; i <24; i ++) {
двери[i] = новая дверь (myCal, i + 1);
двери[i].content ();
}
обратные двери;
}) ();
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
