Để tạo ra một công cụ xem tử vi với các tính năng như cung hoàng đạo, tuổi hợp, tính cách trong tình yêu và công việc, và lý giải lý do vì sao không hợp tuổi Dần, bạn có thể xây dựng một website đơn giản sử dụng HTML, CSS, và JavaScript. Dưới đây là một ví dụ cơ bản về cách triển khai công cụ tử vi này.
1. HTML (Cấu trúc của trang)
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Xem Tử Vi</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Xem Tử Vi</h1>
<label for="birthYear">Nhập năm sinh của bạn:</label>
<input type="number" id="birthYear" placeholder="VD: 2000" min="1900" max="2100">
<button onclick="showFortune()">Xem Tử Vi</button>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>
2. CSS (Style cho trang)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}
h1 {
text-align: center;
color: #333;
}
input {
width: 100%;
padding: 10px;
margin-top: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
margin-top: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#result {
margin-top: 20px;
font-size: 16px;
color: #333;
}
3. JavaScript (Logic tính toán Tử Vi)
function showFortune() {
const year = document.getElementById('birthYear').value;
const result = document.getElementById('result');
let message = "";
if (!year || year < 1900 || year > 2100) {
result.innerHTML = "Vui lòng nhập năm sinh hợp lệ!";
return;
}
const zodiac = getZodiac(year);
const personality = getPersonality(year);
const compatibleSign = getCompatibleSign(year);
const workAdvice = getWorkAdvice(year);
const loveAdvice = getLoveAdvice(year);
message = `
<h3>Tử Vi của bạn:</h3>
<p><strong>Thiên Can & Địa Chi:</strong> ${zodiac}</p>
<p><strong>Tính cách:</strong> ${personality}</p>
<p><strong>Tuổi hợp:</strong> ${compatibleSign}</p>
<p><strong>Lời khuyên công việc:</strong> ${workAdvice}</p>
<p><strong>Lời khuyên tình yêu:</strong> ${loveAdvice}</p>
`;
result.innerHTML = message;
}
function getZodiac(year) {
const zodiacSigns = ["Canh Thìn", "Mậu Dần", "Tân Tỵ", "Nhâm Ngọ", "Quý Mùi", "Giáp Thân", "Ất Dậu", "Bính Tuất", "Đinh Hợi", "Mậu Tý", "Kỷ Sửu", "Canh Dần"];
const index = (year - 1900) % 12;
return zodiacSigns[index];
}
function getPersonality(year) {
if (year == 1998) {
return "Mậu Dần: Nhiệt huyết, mạnh mẽ, độc lập nhưng đôi khi nóng vội và thiếu kiên nhẫn.";
}
if (year == 2000) {
return "Canh Thìn: Thông minh, quyết đoán, có khả năng lãnh đạo nhưng đôi khi cứng nhắc.";
}
if (year == 2001) {
return "Tân Tỵ: Kín đáo, thận trọng, suy nghĩ sâu sắc nhưng thiếu sự bộc lộ cảm xúc.";
}
return "Thông tin không có sẵn!";
}
function getCompatibleSign(year) {
// Ví dụ tuổi hợp
if (year == 1998) {
return "Tuổi hợp: Tân Tỵ (2001), Canh Thìn (2000), Mậu Ngọ (2002)";
}
if (year == 2000) {
return "Tuổi hợp: Tân Tỵ (2001), Canh Thìn (2000), Nhâm Tý (2000)";
}
if (year == 2001) {
return "Tuổi hợp: Mậu Dần (1998), Canh Thìn (2000), Tân Tỵ (2001)";
}
return "Thông tin không có sẵn!";
}
function getWorkAdvice(year) {
if (year == 1998) {
return "Nên làm công việc đòi hỏi sự sáng tạo, lãnh đạo hoặc công việc tự do.";
}
if (year == 2000) {
return "Nên theo đuổi sự nghiệp lãnh đạo hoặc các lĩnh vực kinh doanh, chính trị.";
}
if (year == 2001) {
return "Nên chọn công việc nghiên cứu, quản lý hoặc công việc cần sự tỉ mỉ, chi tiết.";
}
return "Thông tin không có sẵn!";
}
function getLoveAdvice(year) {
if (year == 1998) {
return "Nên tìm người biết kiên nhẫn và hiểu tính cách nóng nảy của bạn.";
}
if (year == 2000) {
return "Nên tìm người cùng chí hướng, biết chia sẻ và hỗ trợ bạn trong công việc.";
}
if (year == 2001) {
return "Nên tìm người biết lắng nghe và chia sẻ cảm xúc, giúp bạn mở lòng hơn.";
}
return "Thông tin không có sẵn!";
}
Giải thích:
- HTML: Tạo giao diện với một ô nhập năm sinh và nút "Xem Tử Vi". Khi người dùng nhập năm sinh và nhấn nút, trang sẽ hiển thị kết quả tử vi.
- CSS: Cung cấp kiểu dáng đơn giản cho trang web, tạo sự thân thiện và dễ nhìn.
- JavaScript:
showFortune(): Hàm chính xử lý khi người dùng nhấn nút, gọi các hàm khác để tính toán tử vi và hiển thị kết quả.getZodiac(): Xác định Thiên Can và Địa Chi theo năm sinh.getPersonality(),getCompatibleSign(),getWorkAdvice(),getLoveAdvice(): Các hàm này trả về thông tin tử vi theo năm sinh cụ thể, như tính cách, tuổi hợp, lời khuyên về công việc và tình yêu.
Cách sử dụng:
- Người dùng nhập năm sinh vào ô input và nhấn nút "Xem Tử Vi". Kết quả tử vi sẽ được hiển thị dưới form nhập liệu.
Tính năng thêm:
- Có thể mở rộng thêm tính năng như cung hoàng đạo, chi tiết về các mối quan hệ, các năm hợp khắc khác, hoặc tích hợp dữ liệu từ một API tử vi.
0 Reviews
Your rating