<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Trung Tâm Chỉ Huy Quân Đội</h1>
<button onclick="macDongPhuc()">Mặc Đồng Phục (Vàng)</button>
<button onclick="nguyTrang()">Ngụy Trang (Tím)</button>
<button onclick="tangHinh()">Tàng Hình</button>
<button onclick="hienHinh()">Tập Hợp</button>
<button onclick="randomColor()">ngẫu nhiên</button>
<div id="san-tap">
<div class="minion">1</div>
<div class="minion">2</div>
<div class="minion">3</div>
<div class="minion">4</div>
<div class="minion">5</div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
text-align: center;
font-family: Arial, sans-serif;
}
#san-tap {
margin-top: 20px;
display: flex;
justify-content: center;
gap: 10px;
}
.minion {
width: 60px;
height: 80px;
background-color: gray; /* Màu mặc định */
border: 2px solid black;
border-radius: 20px 20px 10px 10px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
transition: 0.5s; /* Hiệu ứng chuyển đổi mượt mà */
}
// 1. Lấy danh sách tất cả các minion
// Kết quả trả về là một Danh sách (NodeList)
let doiQuan = document.getElementsByClassName("minion");
function macDongPhuc() {
// Duyệt qua từng chú minion từ đầu đến cuối
for (let i = 0; i < doiQuan.length; i++) {
doiQuan[i].style.backgroundColor = "yellow";
doiQuan[i].style.color = "black";
doiQuan[i].style.opacity = "1"; // Đảm bảo không bị tàng hình
}
}
function nguyTrang() {
for (let i = 0; i < doiQuan.length; i++) {
doiQuan[i].style.backgroundColor = "purple";
doiQuan[i].style.color = "white";
doiQuan[i].style.opacity = "1";
}
}
function tangHinh() {
for (let i = 0; i < doiQuan.length; i++) {
doiQuan[i].style.opacity = "0"; // Làm mờ đi hoàn toàn
}
}
function hienHinh() {
for (let i = 0; i < doiQuan.length; i++) {
doiQuan[i].style.opacity = "1"; // Hiện lại
}
}
// Danh sách màu có sẵn
const colors = ["red", "blue", "green", "yellow", "purple", "orange", "pink"];
function randomColor() {
for (let i=0;i<doiQuan.length;i++) {
const randomColor = colors[Math.floor(Math.random() * colors.length)];
doiQuan[i].style.backgroundColor = randomColor;
}
}