Всем привет!))
Есть пара заданий которые не получается решить, очень прошу помощи!!!!
1. Напишите код, который по нажатию на кнопку делает цвет абзаца градациями от бледно-синего до ярко синего
2. Напишите код, который по нажатию на кнопку делает все четные абзацы на странице синим цветом и шрифтом Arial. А каждый третий абзац красным.
Я думала что можно во втором как-то поставить нумерацию абзацев и потом применять стили, но что-то у меня ничего не получается (((
JavaScript
JavaScript игра с абзацами
Каждый шестой каким цветом красить? Я – синим!
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Документ</title>
<style>
.black { color: black; font-family: "Times New Roman"; }
.red { color: red; }
.blue { color: blue; font-family: Arial; }
.txt { text-indent: 50px;}
</style>
<script>
const main = () => {
const button = document.querySelector('#foo');
button.addEventListener('click', replaceClasses);
};
const replaceClasses = () => {
let nodes = document.querySelectorAll('.txt');
let pos = 1;
for (let node of nodes) {
if (~pos & 1) {
node.classList.toggle("black");
node.classList.toggle("blue");
}
if (0 === pos % 3) {
node.classList.toggle("black");
node.classList.toggle("red");
}
pos += 1;
}
};
window.addEventListener('DOMContentLoaded', main);
</script>
</head>
<body>
<div id="box">
<button id="foo">кнопка</button>
<p class="txt black">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, fuga beatae aut eius ut nam porro. Quo, nemo harum fuga voluptatem non mollitia illo.</p>
<p class="txt black">Ipsam, esse, reprehenderit distinctio similique vel rerum natus mollitia ipsum quis repudiandae odio laboriosam adipisci? At, sequi doloremque! Numquam iusto ratione impedit officiis quo.</p>
<p class="txt black">Officiis, at, aut qui accusantium minus est numquam eveniet quisquam saepe tenetur nesciunt magnam amet impedit magni porro ad quidem! Sapiente quis reprehenderit est.</p>
<p class="txt black">Facere vero a repellat voluptates magni quidem enim. Corporis, maiores, fugiat qui eos quibusdam distinctio doloribus provident possimus doloremque dolor aperiam molestiae esse quo.</p>
<p class="txt black">Praesentium, in, dolores, temporibus cupiditate illum ullam iure molestias id numquam nemo ipsum earum illo. Adipisci, nostrum, doloribus ab deleniti eius molestiae ex omnis.</p>
<p class="txt black">Excepturi, veritatis, quos, rem, magni perferendis voluptate laborum earum magnam eligendi blanditiis odit id asperiores voluptas placeat impedit. Soluta, recusandae sed perspiciatis mollitia nihil?</p>
<p class="txt black">Cum, enim quibusdam veniam harum doloribus sit odit? Temporibus, quos eaque dolorem nesciunt atque odio voluptates a obcaecati at aliquam assumenda rerum hic. Ad!</p>
<p class="txt black">Quaerat, ipsa, asperiores nemo eos aspernatur est maxime eligendi quo similique aliquid at sapiente doloribus iure error suscipit nihil ea. Repudiandae, dolore quis velit.</p>
<p class="txt black">Nobis, ducimus, cum, consequatur, quia error quaerat ab aut aspernatur accusantium nihil consequuntur omnis ipsa eius quam odit qui blanditiis eos asperiores eum quos.</p>
<p class="txt black">Rerum, dignissimos, maiores, itaque veritatis officia voluptas doloribus cumque aliquam quo facilis soluta perspiciatis dolor velit fugit quia libero sunt repellat totam eius nostrum.</p>
</div>
</body>
</html>
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Документ</title>
<style>
.black { color: black; font-family: "Times New Roman"; }
.red { color: red; }
.blue { color: blue; font-family: Arial; }
.txt { text-indent: 50px;}
</style>
<script>
const main = () => {
const button = document.querySelector('#foo');
button.addEventListener('click', replaceClasses);
};
const replaceClasses = () => {
let nodes = document.querySelectorAll('.txt');
let pos = 1;
for (let node of nodes) {
if (~pos & 1) {
node.classList.toggle("black");
node.classList.toggle("blue");
}
if (0 === pos % 3) {
node.classList.toggle("black");
node.classList.toggle("red");
}
pos += 1;
}
};
window.addEventListener('DOMContentLoaded', main);
</script>
</head>
<body>
<div id="box">
<button id="foo">кнопка</button>
<p class="txt black">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, fuga beatae aut eius ut nam porro. Quo, nemo harum fuga voluptatem non mollitia illo.</p>
<p class="txt black">Ipsam, esse, reprehenderit distinctio similique vel rerum natus mollitia ipsum quis repudiandae odio laboriosam adipisci? At, sequi doloremque! Numquam iusto ratione impedit officiis quo.</p>
<p class="txt black">Officiis, at, aut qui accusantium minus est numquam eveniet quisquam saepe tenetur nesciunt magnam amet impedit magni porro ad quidem! Sapiente quis reprehenderit est.</p>
<p class="txt black">Facere vero a repellat voluptates magni quidem enim. Corporis, maiores, fugiat qui eos quibusdam distinctio doloribus provident possimus doloremque dolor aperiam molestiae esse quo.</p>
<p class="txt black">Praesentium, in, dolores, temporibus cupiditate illum ullam iure molestias id numquam nemo ipsum earum illo. Adipisci, nostrum, doloribus ab deleniti eius molestiae ex omnis.</p>
<p class="txt black">Excepturi, veritatis, quos, rem, magni perferendis voluptate laborum earum magnam eligendi blanditiis odit id asperiores voluptas placeat impedit. Soluta, recusandae sed perspiciatis mollitia nihil?</p>
<p class="txt black">Cum, enim quibusdam veniam harum doloribus sit odit? Temporibus, quos eaque dolorem nesciunt atque odio voluptates a obcaecati at aliquam assumenda rerum hic. Ad!</p>
<p class="txt black">Quaerat, ipsa, asperiores nemo eos aspernatur est maxime eligendi quo similique aliquid at sapiente doloribus iure error suscipit nihil ea. Repudiandae, dolore quis velit.</p>
<p class="txt black">Nobis, ducimus, cum, consequatur, quia error quaerat ab aut aspernatur accusantium nihil consequuntur omnis ipsa eius quam odit qui blanditiis eos asperiores eum quos.</p>
<p class="txt black">Rerum, dignissimos, maiores, itaque veritatis officia voluptas doloribus cumque aliquam quo facilis soluta perspiciatis dolor velit fugit quia libero sunt repellat totam eius nostrum.</p>
</div>
</body>
</html>
Похожие вопросы
- Как сделать простую игру на javascript
- Есть ли аналоги JavaScript?
- С чего начать учить JavaScript?
- Подскажите книги для изучения javascript? Хочу начать изучать веб программирование javascript подойтет для начала?
- Зачем нужен prototype в JavaScript?
- Тяжело ли выучить JavaScript?
- Как создать квадрат через JavaScript?
- Почему простые текстовые игры не пишут в браузере на javascript, используя другие решения
- Где найти хорошие примеры анимации персонажей в играх на Javascript ?
- Смотрел я тут учебный курс Евгения Попова по javascript. Удивил он (Попов) в паре мест...
Спасибо огромное за помощь! Буду пытаться понять