Bài viết này hướng dẫn bạn xây dựng chương trình kiểm tra cung hoàng đạo bằng javascript. Bằng cách nhập ngày sinh, hệ thống sẽ xác định và hiển thị cung hoàng đạo tương ứng.
Xem thêm:
Bài thực hành 5: thẻ select trong HTML
1. Mô tả bài toán
Hãy thiết kế giao diện đơn giản dưới đây:
txtNgaysinh sẽ được sử dụng để xác định cung hoàng đạo, hiển thị kết quả vào txtCung. Việc xác định cung được tổ chức dưới dạng chương trình con. Nếu nội dung txtNgaysinh trống thì hiển thị thông báo yêu cầu nhập, đồng thời đặt con trỏ vào điều khiển này.- Cung Ma Kết (22/12 – 19/1)
- Cung Bảo Bình (20/1 – 18/2)
- Cung Song Ngư (19/2 đến 20/3)
- Cung Bạch Dương (21/3 đến 20/4)
- Cung Kim Ngưu (21/4 đến 21/5)
- Cung Song Tử (22/5 đến 21/6)
- Cung Cự Giải ( 22/6 đến 22/7)
- Cung Sư Tử (23/7 đến 23/8)
- Cung Xử Nữ (24/8 đến 22/9)
- Cung Thiên Bình (23/9 đến 23/10)
- Cung Bọ Cạp (24/10 đến 22/11)
- Cung Nhân Mã (23/11 đến 21/12)
Live demo: https://ttnguyenblog.github.io/kiem-tra-cung-hoang-dao-javascript/
>> Source code: https://github.com/ttnguyenblog/kiem-tra-cung-hoang-dao-javascript
2. Hàm xacDinhCungHoangDao
Hàm xacDinhCungHoangDao(ngaySinh) nhận đầu vào là một chuỗi ngày sinh (ngaySinh). Trước tiên, nó tạo một đối tượng Date từ chuỗi ngày sinh đó. Sau đó, nó lấy ngày và tháng từ đối tượng Date và gán chúng vào các biến ngay và thang.
Hàm hỗ trợ lấy các mốc thời gian:
- getDate(): hàm trả về ngày trong tháng (từ ngày 1 – 31).
- getDay(): hàm trả về ngày trong tuần (0-6), với chủ nhật là
0, thứ 2 là1, thứ 3 là 2 ,… - getMonth(): hàm trả về tháng trong năm (từ 0 – 11), do đó ta cần cộng thêm
1nha. - getFullYear(): hàm trả về năm dạng đầy đủ dạng
YYYY. - getHours(): hàm trả về số giờ dạng 24h ( từ 0 – 23)
- getMinutes() trả về phút trong giờ (0 – 59).
- getSeconds() trả về số giây trong phút (0 – 59).
- getMilliSeconds() trả về tích tắc trong giây (0 – 999).
- getTime() Trả về thời gian dạng mili giây.
Tiếp theo, hàm sử dụng câu lệnh switch để kiểm tra giá trị của biến thang. Tùy thuộc vào giá trị của thang, hàm sẽ kiểm tra giá trị của ngay trong mỗi trường hợp để xác định cung hoàng đạo tương ứng. Nếu giá trị ngay nằm trong khoảng hợp lệ, hàm sẽ trả về tên cung hoàng đạo tương ứng.
Hàm xemCung() được gọi khi người dùng nhấn nút để xem cung hoàng đạo. Đầu tiên, nó lấy giá trị ngày sinh từ trường input có id là ‘txtNgaysinh’. Sau đó, nó kiểm tra xem giá trị ngày sinh có rỗng không. Nếu rỗng, một cảnh báo sẽ xuất hiện và trường input sẽ được tập trung để người dùng nhập thông tin. Ngược lại, hàm gọi xacDinhCungHoangDao(ngaySinh) để xác định cung hoàng đạo từ ngày sinh và gán giá trị cung hoàng đạo vào trường input có id là ‘txtCung’.
3. Thiết kế giao diện HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Kiểm tra cung hoàng đạo bằng JavaScript</title>
</head>
<body>
<div class="container">
<form action="#" method="post" class="form">
<div class="form-row">
<label for="txtNgaysinh" class="form-label">Ngày sinh:</label>
<input type="date" class="form-inp" id="txtNgaysinh" >
</div>
<div class="form-row">
<label for="txtCung" class="form-label" >Cung:</label>
<input type="text" class="form-inp" id="txtCung" >
</div>
<div class="form-btn">
<input type="button" value="Xem" id="btn-show" class="input-btn" onclick="xemCung()">
<input type="button" value="Xoá" id="btn-del" class="input-btn" onclick="xoa()">
</div>
</form>
</div>
<script src="main.js"></script>
</body>
</html>
4. Logic JavaScript Xác Định Cung Hoàng Đạo
Dưới đây là mã JavaScript giúp xác định cung hoàng đạo từ ngày sinh:
function xacDinhCungHoangDao(ngaySinh) {
const date = new Date(ngaySinh);
const ngay = date.getDate();
const thang = date.getMonth() + 1;
switch (thang) {
case 1: {
if (ngay > 0 && ngay <= 19) {
return "Ma Kết";
}
if (ngay > 19 && ngay <= 31) {
return "Bảo Bình";
}
break;
}
case 2: {
if (ngay > 0 && ngay <= 18) {
return "Bảo Bình";
}
if (ngay > 19 && ngay <= 28) {
return "Song Ngư";
}
break;
}
case 3: {
if (ngay > 0 && ngay <= 20) {
return "Song Ngư";
}
if (ngay > 20 && ngay <= 31) {
return "Bạch Dương";
}
break;
}
case 4: {
if (ngay > 0 && ngay <= 20) {
return "Bạch Dương";
}
if (ngay > 20 && ngay <= 30) {
return "Kim Ngưu";
}
break;
}
case 5: {
if (ngay > 0 && ngay <= 20) {
return "Kim Ngưu";
}
if (ngay > 20 && ngay <= 31) {
return "Song Tử";
}
break;
}
case 6: {
if (ngay > 0 && ngay <= 21) {
return "Song Tử";
}
if (ngay > 21 && ngay <= 30) {
return "Cự Giải";
}
break;
}
case 7: {
if (ngay > 0 && ngay <= 22) {
return "Cự Giải";
}
if (ngay > 22 && ngay <= 31) {
return "Sư Tử";
}
break;
}
case 8: {
if (ngay > 0 && ngay <= 22) {
return "Sư Tử";
}
if (ngay > 22 && ngay <= 31) {
return "Xử Nữ";
}
break;
}
case 9: {
if (ngay > 0 && ngay <= 22) {
return "Xử Nữ";
}
if (ngay > 22 && ngay <= 30) {
return "Thiên Bình";
}
break;
}
case 10: {
if (ngay > 0 && ngay <= 23) {
return "Thiên Bình";
}
if (ngay > 23 && ngay <= 31) {
return "Bọ Cạp";
}
break;
}
case 11: {
if (ngay > 0 && ngay <= 22) {
return "Bọ Cạp";
}
if (ngay > 22 && ngay <= 30) {
return "Nhân Mã";
}
break;
}
case 12: {
if (ngay > 0 && ngay <= 21) {
return "Nhân Mã";
}
if (ngay > 21 && ngay <= 31) {
return "Ma Kết";
}
break;
}
}
}
function xemCung() {
const ngaySinh = document.getElementById('txtNgaysinh').value;
const txtCung = document.getElementById('txtCung');
if(ngaySinh==''){
alert('Bạn chưa nhập thông tin, ngu vl');
document.getElementById('txtNgaysinh').focus();
}else{
const cung = xacDinhCungHoangDao(ngaySinh);
txtCung.value = cung;
}
}
function xoa(){
var ngaySinh = document.getElementById('txtNgaysinh');
ngaySinh.value='';
var txtCung = document.getElementById('txtCung');
txtCung.value = '';
}
Trên đây là code mẫu kiểm tra cung hoàng đạo javascript trong chuỗi bài tập thực hành môn lập trình web. Với bài hướng dẫn chi tiết này, bạn đã có thể xây dựng một ứng dụng kiểm tra cung hoàng đạo bằng JavaScript. Cảm ơn các bạn đã tham khảo trên ttnguyen.net.
