Динамична таблица с цветове с JavaScript
Искате ли да добавите динамика и интерактивност на вашия уебсайт? Създаването на таблица с цветове, генерирана чрез JavaScript, е лесен начин да привлечете вниманието на посетителите! Тази статия ще ви преведе стъпка по стъпка през процеса.
Защо е полезно?
- Повишава интерактивността: Цветовата таблица реагира на потребителя, като променя цвета на фона при посочване.
- Създава модерна визия: Проста идея, която преобразява външния вид на вашия сайт.
- Лесно за изпълнение: Подходящо както за начинаещи, така и за напреднали разработчици.
Как да го направите?
- HTML структура:
Създайте основен HTML файл с таблица, която ще бъде генерирана динамично.
Пример:
HTML:
<!DOCTYPE html>
<html lang="bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Динамична таблица с цветове</title>
</head>
<body>
<h1>Таблица с цветове</h1>
<table id="colorTable"></table>
</body>
</html>- CSS стилове:
Добавете стилове, за да направите таблицата привлекателна:
CSS:
body {
background-color: #ffffff;
font-family: Arial, sans-serif;
text-align: center;
}
table {
margin: 20px auto;
border-collapse: collapse;
}
td {
width: 100px;
height: 20px;
text-align: center;
cursor: pointer;
}3.JavaScript логика:
Генерирайте цветове динамично и ги добавете към таблицата:
JavaScript:
const colors = ["00", "33", "66", "99", "CC", "FF"];
const colorTable = document.getElementById("colorTable");
for (let r = 0; r < colors.length; r++) {
for (let g = 0; g < colors.length; g++) {
for (let b = 0; b < colors.length; b++) {
const colorCode = `#${colors[r]}${colors[g]}${colors[b]}`;
const row = document.createElement("tr");
const cell = document.createElement("td");
cell.style.backgroundColor = colorCode;
cell.textContent = colorCode;
cell.addEventListener("mouseover", () => {
document.body.style.backgroundColor = colorCode;
});
row.appendChild(cell);
colorTable.appendChild(row);
}
}
}
Ползи от този проект
- Интерактивно съдържание: Впечатлете посетителите с динамичен дизайн.
- Учене чрез практика: Усъвършенствайте JavaScript уменията си.
- Лесна интеграция: Подходящо за всякакви проекти.
Изтеглете кода
Готови ли сте да експериментирате? Изтеглете пълния файл и вижте магията в действие!Ако имате въпроси или нужда от помощ, споделете в коментарите!
Подпис:
Автор: @BladeЕксклузивна статия за форума DTGaraGe
Копирането на съдържанието е забранено без изрично разрешение!
Last edited by a moderator: