<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Quay Số Ngẫu Nhiên</h1>
<div class="input-group">
<label for="startNumber">Số Bắt Đầu:</label>
<input type="number" id="startNumber" value="1" min="0">
</div>
<div class="input-group">
<label for="endNumber">Số Kết Thúc:</label>
<input type="number" id="endNumber" value="100" min="1">
</div>
<div class="buttons">
<button id="spinButton">Quay Số</button>
<button id="resetButton">Reset</button>
</div>
<div class="result-box">
<p>Kết quả:</p>
<div id="resultDisplay" class="result">?</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f4f4f9;
}
.container {
background-color: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
text-align: center;
width: 90%;
max-width: 400px;
}
h1 {
color: #333;
margin-bottom: 25px;
}
.input-group {
margin-bottom: 15px;
text-align: left;
}
.input-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
.input-group input[type="number"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box; /* Quan trọng để padding không làm tăng chiều rộng */
font-size: 16px;
}
.buttons {
margin-top: 20px;
display: flex;
justify-content: space-between;
}
button {
padding: 10px 20px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
flex-grow: 1;
margin: 0 5px;
}
#spinButton {
background-color: #007bff;
color: white;
}
#spinButton:hover {
background-color: #0056b3;
}
#resetButton {
background-color: #6c757d;
color: white;
}
#resetButton:hover {
background-color: #5a6268;
}
.result-box {
margin-top: 30px;
padding: 15px;
border: 2px solid #ddd;
border-radius: 8px;
background-color: #e9ecef;
}
.result-box p {
margin: 0 0 10px 0;
font-size: 18px;
font-weight: bold;
color: #333;
}
.result {
font-size: 4em;
font-weight: bold;
color: #dc3545;
min-height: 60px; /* Đảm bảo chiều cao không đổi */
line-height: 1;
}
// Lấy các phần tử DOM
const startInput = document.getElementById('startNumber');
const endInput = document.getElementById('endNumber');
const spinButton = document.getElementById('spinButton');
const resetButton = document.getElementById('resetButton');
const resultDisplay = document.getElementById('resultDisplay');
/**
* Hàm tạo số nguyên ngẫu nhiên trong một phạm vi (bao gồm cả start và end).
* @param {number} min - Số bắt đầu (bao gồm).
* @param {number} max - Số kết thúc (bao gồm).
* @returns {number} Số nguyên ngẫu nhiên.
*/
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
// Công thức: Math.floor(Math.random() * (max - min + 1)) + min
return Math.floor(Math.random() * (max - min + 1)) + min;
}
/**
* Hàm xử lý khi nhấn nút "Quay Số".
*/
function handleSpin() {
// 1. Lấy giá trị đầu vào và chuyển sang số nguyên
let start = parseInt(startInput.value);
let end = parseInt(endInput.value);
// 2. Kiểm tra tính hợp lệ
if (isNaN(start) || isNaN(end)) {
resultDisplay.textContent = 'Lỗi: Vui lòng nhập số hợp lệ!';
resultDisplay.style.color = '#ffc107'; // Màu vàng cảnh báo
return;
}
if (start >= end) {
resultDisplay.textContent = 'Lỗi: Bắt đầu phải nhỏ hơn Kết thúc!';
resultDisplay.style.color = '#dc3545'; // Màu đỏ lỗi
return;
}
// 3. Thực hiện quay số ngẫu nhiên
const randomNumber = getRandomIntInclusive(start, end);
// 4. Hiển thị kết quả
// Thêm hiệu ứng quay đơn giản bằng cách thay đổi text nhanh
let spinCount = 0;
const maxSpins = 15;
const spinIntervalTime = 100; // 100ms
// Vô hiệu hóa nút trong khi quay
spinButton.disabled = true;
const spinInterval = setInterval(() => {
if (spinCount < maxSpins) {
// Hiển thị số ngẫu nhiên tạm thời
resultDisplay.textContent = getRandomIntInclusive(start, end);
spinCount++;
} else {
// Dừng interval và hiển thị kết quả cuối cùng
clearInterval(spinInterval);
resultDisplay.textContent = randomNumber;
resultDisplay.style.color = '#28a745'; // Màu xanh lá thành công
// Kích hoạt lại nút
spinButton.disabled = false;
}
}, spinIntervalTime);
}
/**
* Hàm xử lý khi nhấn nút "Reset".
*/
function handleReset() {
// Đặt lại giá trị mặc định cho các trường nhập
startInput.value = 1;
endInput.value = 100;
// Đặt lại hiển thị kết quả
resultDisplay.textContent = '?';
resultDisplay.style.color = '#dc3545'; // Đặt lại màu mặc định
spinButton.disabled = false; // Đảm bảo nút quay được kích hoạt
}
// Gắn sự kiện vào các nút
spinButton.addEventListener('click', handleSpin);
resetButton.addEventListener('click', handleReset);
// Thiết lập trạng thái ban đầu khi tải trang
handleReset();