JavaScript | Как создать бегущую строку? — efim360.ru

JavaScript | Как создать бегущую строку?

Код HTML-разметки с тегом script:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>

</head>

<body>

    <h1>Бегущая строка</h1>

    <script>

 

        let h1 = document.getElementsByTagName('h1')[0];

 

        function playh1(element){

            let str = element.textContent;

            let a = str.slice(1);

            let b = str.slice(0, 1);

            let newstr = a + b;

            element.textContent = newstr;

            return;

        };

 

        let si = setInterval(playh1, 500, h1);

 

    </script>

</body>

</html>

 

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

За движение строки отвечает функция сдвига строки и интервальный таймер.

Для простоты видимости движения мы указали время в пол секунды - 500 миллисекунд. Чтобы было заметно.

 

Интервальный таймер вызывает функцию, которая принимает объект HTML-элемента и меняет у него содержимое свойства textContent.

 

Информационные ссылки

HTML | Таймеры