Как сделать таймер
medium

Создаём собственный таймер-напоминалку

Таймеров и трекеров полно, но мы сделаем такой, какой нужен именно вам. Это легко.

В мире множество таймеров и трекеров продуктивности. И все они либо невозможно дорогие, либо делают миллион вещей, кроме той одной, которая реально нужна.

В этой статье мы запрограммируем очень простой, но зато ваш собственный таймер, который будет напоминать о нужном деле. Сделаем его таким, какой он действительно должен быть, и забудем о покупке дорогих трекеров.

Наш таймер будет спрашивать, о чём нам напомнить и через сколько времени. Когда выходит время, он напоминает. Всё, больше ничего от него пока не требуется.

Решение

Алгоритм решения будет таким:

  1. Спрашиваем, о чём напомнить и через сколько минут.
  2. Когда настанет нужное время — выводим напоминание и привлекаем внимание к этой вкладке.

Как и все простые программы, мы будем писать эту прямо в консоли «Инспектора». Чтобы его открыть, найдите в меню браузера пункт «Консоль» (обычно где-то в инструментах разработчика) или нажмите Cmd + Alt + I или Ctrl + Alt + I. Убедитесь, что у вас открыта консоль. Всё, что мы будем писать в ней, будет сразу исполняться браузером, а это именно то, что нам нужно.

Приветствие и вопрос

Начнём с приветствия:

// Начало основной программы, приветствуем пользователя
alert('Привет! Я — ваш таймер, который может вам напомнить о чём-то. Я буду работать до тех пор, пока вы не закроете эту страницу.');

Теперь узнаем, о чём нужно напомнить и когда:

// Спрашиваем текст напоминания, который нужно потом показать пользователю
var text = prompt('О чём вам напомнить?');
// Тут будем хранить время, через которое нужно показать напоминание
var time = prompt('Через сколько минут?');
// Чтобы работать со временем в JavaScript, нам нужно перевести его в миллисекунды. Для этого число минут умножаем на 60 тысяч:
time = time * 60 * 1000;

Теперь у нас две переменные: text и time. В одной — о чём напомнить, в другой — через сколько миллисекунд. Теперь нужно научить программу выводить text через время time.
Чтобы что-то сработало через определённое время, используем функцию setTimeout — мы про неё говорили в задаче про чат-бота:

setTimeout(function () {
  команды_которые_нужно_сделать
  }, время_в_миллисекундах_через_которое_нужно_выполнить_эти_команды );

Время у нас уже есть, остались команды, которые нужно сделать: вывести напоминание и привлечь потом внимание к окну. Сначала показываем напоминание, когда сработает таймер:

// Выводим на экран текст напоминания, который хранится в переменной text
alert(text);

А чтобы привлечь внимание к окну, применим программистскую магию и возьмём функцию titleAlert() — она уже встроена в эту страницу, поэтому её можно сразу использовать.

Функция — как мини-программа внутри основной программы. У каждой функции есть имя — если его написать в теле основной программы, то она поставится на паузу, сделает всё, что написано в функции, а потом продолжит с того места, где остановилась.

Как использовать встроенные в страницу функции — читайте в отдельной статье.

В итоге наша функция setTimeout будет выглядеть так:

setTimeout(function () {
  // Выводим на экран текст напоминания, который хранится в переменной text
  alert(text);
  // Привлекаем внимание к окну мигающим заголовком
  titleAlert();
  // В самом конце функции указываем время, через которое она должна сработать
  }, time)

Теперь собираем всё вместе:

// Спрашиваем текст напоминания, который нужно потом показать пользователю
var text = prompt('О чём вам напомнить?');
// Тут будем хранить время, через которое нужно показать напоминание
var time = prompt('Через сколько минут?');
// Чтобы работать со временем в JavaScript, нам нужно перевести его в миллисекунды. Для этого число минут умножаем на 60 тысяч:
time = time * 60 * 1000;
// Ставим таймер на нужное время с помощью функции setTimeout
setTimeout(function () {
  // Выводим на экран текст напоминания, который хранится в переменной text
  alert(text);
  // Привлекаем внимание к окну мигающим заголовком
  titleAlert();
  // В самом конце функции указываем время, через которое она должна сработать
}, time);
Эту программу можно улучшить — например, сделать помидорный таймер, который будет напоминать о чём-то не однократно, а постоянно, с равными интервалами.
Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
medium