<MyRusakov.ru />

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

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

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

Дополнительно, почти к каждому уроку идут упражнения.

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Библиотека jQuery», «Защита JavaScript-кода от копирования», «Решение упражнений из курса», «HTML для начинающих» и «CSS для начинающих».

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

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

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

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

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

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

Эффект печатающегося текста на JS

Эффект печатающегося текста на JS

Как с пользой можно применить эффект печатающегося текста на сайтах? Первое, что приходит в голову - для фиксирования внимания посетителей на нужной информации. Появляющийся текст по одной букве, имитирующий эффект печатной машинки, будет выделяться от статичного контента. Идея достойная, осталось только её реализовать и тут без JS никак не обойтись.

Печатающийся текст будет выводиться на HTML странице внутри тега <pre></pre>. Этот тег позволяет выводить текст в таком же виде, как он был набран в редакторе, сохраняя пробелы и переносы строк.

Алгоритм действий

Прежде чем приступить к написанию JS кода, набросаем в голове порядок действий:

  • объявим переменные с необходимыми данными
  • создадим функцию, печатающую один символ через определенный промежуток времени
  • печатаем первый символ
  • увеличиваем счетчик символов на единицу
  • проверяем, не закончились ли строки и сам текст
  • очищаем установленный таймаут
  • зацикливаем функцию

JS код

Создадим переменную text и поместим в неё массив выводимого печатающегося текста, состоящего из строк.

const text = [
    'Ты у меня одна,\n',
    'Словно в ночи луна,\n',
    'Словно в году весна,\n',
    'Словно в степи сосна.\n'
];

А теперь представим, что перед нами чистый лист бумаги, заправленный в печатную машинку. Все показатели на нуле - пока нет линий и букв. Создадим ещё три переменные:

let line = 0; // начальная линия текста
let count = 0; // счетчик позиции букв
let result = ''; // получаемый текст на выходе

Создадим функцию, рисующую строки. В теле функции инициализируем переменную, запускающую событие через определенный промежуток времени. Метод setTimeout позволит выполнить, указанное внутри стрелочной функции действие, через заданное количество времени в миллисекундах.

Функция typeLine() добавит в result первый символ в первую строку печатающегося текста. Для этого обратимся к тексту, как к массиву. После этого, выведем печатающийся текст на HTML странице, в теге pre. Получим pre по селектору и для большей реалистичности, в конце каждого символа, добавим символ вертикальной черты.

let line = 0;
let count = 0;
let result = '';
    function typeLine() {
        let interval = setTimeout(
        () => {
        result += text[line][count]
        document.querySelector('pre').innerHTML =result +'|';

К этому моменту функция typeLine() напечатала первый символ - букву "Т". Теперь надо печатать дальше - наращивать переменную count на один символ.

count++;

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

if (count >= text[line].length) {
count = 0;

Дальше задаем условие, что делать, когда закончатся все текстовые линии. Тогда, мы остановим наш таймаут и зациклим вывод функции, вызвав её повторно.

line++;
if (line == text.length) {
    clearTimeout(interval);
    document.querySelector('pre').innerHTML =result;
    return true;
  }
}
typeLine();
    }, 200)
  }
typeLine();

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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