<MyRusakov.ru />

Создание игр на Unreal Engine 4

Создание игр на Unreal Engine 4

Данный курс научит Вас созданию игр на Unreal Engine 4. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров. Дополнительно, почти к каждому уроку идут упражнения для закрепления материала.

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства» и «Создание прототипа RPG с открытым миром».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Таймер обратного отсчета на JavaScript

Таймер обратного отсчета на JavaScript

На этом уроке, мы сделаем таймер обратного отсчета на JavaScript, используя уже готовую верстку на HTML и CSS. Если на странице вашего сайта или лендинга действует скидочная акция на товары или услуги, привязанная к конкретной дате её окончания, то всегда уместно рядом расположить счетчик с убывающими цифрами. Такое психологическое воздействие на покупателя в интернет-маркетинге хорошо зарекомендовало себя.

Наш таймер будет показывать, сколько дней, часов, минут и секунд осталось до завершения акции. Первым делом нам нужно установить дату завершения скидок, пусть скидка будет до конца 2020 года. Создадим переменную deadline и присвоим ей значение new Date(). new Date() - это объект из класса Date, в параметрах которого передадим желаемую дату завершения скидок.

// дата окончания акции
const deadline = new Date(`2020-12-31`);

В расчетах мы будем отталкиваться от текущего времени, поэтому создадим переменную currentTime с новой временной меткой. Далее подсчитаем разницу между концом года и текущим временем. В переменную dist разница будет записываться в милисекундах. Поскольку нам неудобно работать с миллисекундами, то нужно их перевести в привычные для нас единицы времени.

const currentTime = new Date();
// Оставшееся время до конца года
const dist = deadline - currentTime;

Как вместо миллисекунд получить дни? Нужно разницу dist (значение в мл.) разделить на 1000, так мы получим секунды. Затем полученный результат разделить на 60 (получаем минуты). Повторное деление на 60 даст часы и деление на 24 преобразует в дни. По аналогии с получением дней, разберемся и с остальными единицами времени. Ны выходе, у нас будет четыре переменных с нужными единицами времени. Они будут показывать, сколько времени осталось до конца текущего года. Метод Match.floor на лету округлит полученные цифры до целого числа, в меньшую сторону.

// Перевод в дни
const toDays = Math.floor(dist / 1000 / 60 / 60 / 24);
// Перевод в часы, с учетом остатка деления на 24
const toHours = Math.floor(dist / 1000 / 60 / 60) % 24;
// Перевод в минуты, с учетом остатка деления на 60
const toMinutes = Math.floor(dist / 1000 / 60) % 60;
// Перевод в секунды, с учетом остатка деления на 60
const toSeconds = Math.floor(dist / 1000) % 60;

Для вывода значения четырех переменных на страницу, необходимо получить сами HTML теги, куда будут выводиться числа. Получим их все по селектору со своим уникальным id и запишем в переменные.

const year = document.querySelector('#year');
const days = document.querySelector('#days');
const hours = document.querySelector('#hours');
const minutes = document.querySelector('#minutes');
const seconds = document.querySelector('#seconds');

Далее, во все найденные теги нужно вставить дни, часы, минуты и секунды, которые также хранятся в переменных. Поочередно обращаемся к переменным с тегами и записываем внутри тегов через метод inner.HTML переменные с рассчитанными единицами времени. Для красоты, чтобы у нас всегда выводилось по две цифры, например (01, 02 и.т.д), делаем следующую проверку. Если цифра меньше 10, то прибавляем к ней 0 и плюс само значение переменной, в противном случае выводим просто значение переменной.

days.innerText = toDays;
hours.innerText = toHours < 10 ? '0' + toHours : toHours;
minutes.innerText = toMinutes < 10 ? '0' + toMinutes : toMinutes;
seconds.innerText = toSeconds < 10 ? '0' + toSeconds : toSeconds;

Осталось только создать функцию и запускать ее каждую секунду, чтобы наш счетчик ежесекундно обновлялся и менялись цифры. Поможет нам в этом функция setInterval(), запускающая код с определенным интервалом. Обернем наш код с расчетом времени в функцию updateCounter.

function updateCounter() {
    // здесь код
}

Первым аргументом передаем название функции, вторым аргументом - время в миллисекундах.

// Запускаем функцию каждую секунду
setInterval(updateCounter, 1000);

Если после данного урока вас заинтересовал язык JavaScript, то переходите по ссылке на мой видеокурс.


Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.