โปรแกรมคำนวณอายุจากปี พ.ศ. 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>คำนวณอายุแบบ Live</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() + 543;
      
      // คำนวณอายุ
      var age = currentYear - birthYearInput;

      // แสดงผลลัพธ์
      document.getElementById("ageResult").innerHTML = "อายุของคุณคือ: " + age + " ปี";
    }
  </script>
</body>
</html>
 

รับเขียนเว็บไซต์ รับเขียนโปรแกรม ระบบต่างๆ SEO

Line : rayongall / โทร. 085-281-7096

http://line.me/ti/p/~rayongall

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • เปิดใช้งานตลอด

บันทึกการตั้งค่า