Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

Как сделать динамическую подсветку, получается сделать чтобы каждый раз строку вручную писать, как сделать чтобы текст

Артур17823837 Полотов17823827 Ученик (21), открыт 1 неделю назад
Сразу вставить, чтобы не проставлять <p> каждый раз. Джипити тупит.

<!DOCTYPE html>
<html>
<head>
<title>Динамическая подсветка строк</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div id="text-container">
<p>Первая строка текста.</p>
<p>Вторая строка текста.</p>
<p>Третья строка текста.</p>
<p>Четвертая строка текста.</p>
<p>Пятая строка текста.</p>
<p>Шестая строка текста.</p>
<p>Седьмая строка текста.</p>
</div>
<script src="script.js"></script>
</body>
</html>

JavaScript
const textContainer = document.getElementById("text-container");
const lines = textContainer.querySelectorAll("p");
let currentLineIndex = 0;

function highlightLine() {
if (currentLineIndex < lines.length) {
lines[currentLineIndex].classList.add("highlight");
setTimeout(() => {
lines[currentLineIndex].classList.remove("highlight");
currentLineIndex++;
highlightLine();
}, 250); // Задержка уменьшена до 250 миллисекунд
}
}

highlightLine();
0 ответов
Похожие вопросы