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

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

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

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

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

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

Решение

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

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

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

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

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

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

Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

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

Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

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

Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

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

Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

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

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

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

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

Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

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

Ско­пи­ро­вать код
Код ско­пи­ро­ван
Эту про­грам­му мож­но улуч­шить — напри­мер, сде­лать поми­дор­ный тай­мер, кото­рый будет напо­ми­нать о чём-то не одно­крат­но, а посто­ян­но, с рав­ны­ми интер­ва­ла­ми.
Ещё по теме