โปรแกรมคำนวณอายุจากปี ค.ศ. php textbox bootstrap
โปรแกรมคำนวณอายุจากปี ค.ศ. php textbox bootstrap
ในตัวอย่างนี้ เมื่อคลิกปุ่ม “คำนวณ” จะเรียกใช้ฟังก์ชัน
calculateAge()
ซึ่งจะรับค่าปีเกิดจาก textbox และคำนวณอายุจากปีปัจจุบัน และแสดงผลลัพธ์ที่คำนวณได้ทันทีในหน้าเดียวด้วยการใช้ JavaScript โดยไม่ต้องโหลดหน้าเว็บใหม่หรือส่งข้อมูลไปยังหน้าอื่น และยังใช้ Bootstrap เพื่อดึงดูสถานะและสวยงาม.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>คำนวณอายุ (ค.ศ.)</title>
<!-- เรียกใช้ Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2>คำนวณอายุ (แบบ Live)</h2>
<div class="form-group">
<label for="birthYear">ปีเกิด (ค.ศ.):</label>
<input type="text" class="form-control" id="birthYear" placeholder="กรุณากรอกปีเกิด (ค.ศ.)">
</div>
<button type="button" class="btn btn-primary" onclick="calculateAge()">คำนวณ</button>
<div id="ageResult" class="mt-3"></div>
</div>
<!-- เรียกใช้ Bootstrap JS และ jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
function calculateAge() {
// รับค่าปีเกิดจาก textbox
var birthYearInput = document.getElementById("birthYear").value;
// ปีปัจจุบัน (ค.ศ.)
var currentYear = new Date().getFullYear();
// คำนวณอายุ
var age = currentYear - birthYearInput;
// แสดงผลลัพธ์
document.getElementById("ageResult").innerHTML = "อายุของคุณคือ: " + age + " ปี";
}
</script>
</body>
</html>
- ดูระบบ PHP ทั้งหมด
- อ่านบทความทั้งหมด
- ติดต่อเรา
รับเขียนเว็บไซต์ รับเขียนโปรแกรม ระบบต่างๆ SEO
Line : rayongall / โทร. 085-281-7096
