Скрипт может быть использован для привлечения внимания пользователя к важному сообщению или для создания эффекта "живого" общения на сайте.
Особенности
* Задержка между символами регулируется параметром delay.
* Текст для вывода задается переменной text.
* Вывод текста можно прервать, кликнув по ссылке с крестиком.
* Состояние скрипта (запущен/остановлен) сохраняется в localStorage, поэтому при следующем посещении страницы скрипт не будет запущен снова, если он был остановлен ранее.
Пример использования
Код
<div id="output"></div>
<script>
const text = "Привет! Это пример текста, который будет выводиться с эффектом печатания.";
const delay = 50; // задержка между символами в миллисекундах
const output = document.getElementById('output');
const startTime = Date.now();
let index = 0;
let timer;
// Установите значение duration (например, 10 секунд), если оно нужно
const duration = 10; // можно убрать, если не нужно ограничивать время
function printCharacter() {
if (index < text.length) { // убрано условие с duration, если оно не требуется
output.innerHTML += text[index];
index++;
timer = setTimeout(printCharacter, delay); // задержка между символами
} else {
clearTimeout(timer); // очищаем таймер после завершения
showCloseLink(); // показываем ссылку с крестиком
}
}
function showCloseLink() {
const closeLink = document.createElement('a');
closeLink.href = '#';
closeLink.textContent = ' ❌';
closeLink.style.marginLeft = '5px';
closeLink.addEventListener('click', function(event) {
event.preventDefault();
localStorage.setItem('script-closed', 'true'); // запоминаем, что скрипт был закрыт
output.style.display = 'none'; // скрываем вывод скрипта
});
output.appendChild(closeLink);
}
// Проверяем, был ли скрипт уже закрыт
if (localStorage.getItem('script-closed') === 'true') {
output.style.display = 'none'; // скрываем вывод, если скрипт был закрыт
} else {
printCharacter(); // запускаем вывод текста
}
</script>
<script>
const text = "Привет! Это пример текста, который будет выводиться с эффектом печатания.";
const delay = 50; // задержка между символами в миллисекундах
const output = document.getElementById('output');
const startTime = Date.now();
let index = 0;
let timer;
// Установите значение duration (например, 10 секунд), если оно нужно
const duration = 10; // можно убрать, если не нужно ограничивать время
function printCharacter() {
if (index < text.length) { // убрано условие с duration, если оно не требуется
output.innerHTML += text[index];
index++;
timer = setTimeout(printCharacter, delay); // задержка между символами
} else {
clearTimeout(timer); // очищаем таймер после завершения
showCloseLink(); // показываем ссылку с крестиком
}
}
function showCloseLink() {
const closeLink = document.createElement('a');
closeLink.href = '#';
closeLink.textContent = ' ❌';
closeLink.style.marginLeft = '5px';
closeLink.addEventListener('click', function(event) {
event.preventDefault();
localStorage.setItem('script-closed', 'true'); // запоминаем, что скрипт был закрыт
output.style.display = 'none'; // скрываем вывод скрипта
});
output.appendChild(closeLink);
}
// Проверяем, был ли скрипт уже закрыт
if (localStorage.getItem('script-closed') === 'true') {
output.style.display = 'none'; // скрываем вывод, если скрипт был закрыт
} else {
printCharacter(); // запускаем вывод текста
}
</script>
В данном примере текст "Привет! Это пример текста, который будет выводиться с эффектом печатания." будет выводиться на экран с задержкой 50 миллисекунд между символами.
