<MyRusakov.ru />

Программирование на C++ с Нуля до Гуру

Программирование на C++ с Нуля до Гуру

Данный курс научит Вас программировать на языке C++, который, несмотря на свой почтенный возраст, необычайно сильно востребован. Курс состоит из 6 разделов, посмотрев которые и выполнив все упражнения, Вы с нуля освоите этот язык и сможете создавать самые разные проекты любой сложности на C++.

Для закрепления материала из уроков к ним идёт множество упражнений.

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

Также вместе с курсов Вы получаете Бонус "Программирование на C++ в Unreal Engine", в котором Вы научитесь создавать игры на C++ с использованием этого движка.

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

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

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

Подписавшись по 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):

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