โปรแกรมหาพื้นที่วงกลม bootstrap

โปรแกรมหาพื้นที่วงกลม bootstrap

ในโค้ดนี้มีส่วนที่ใช้ Bootstrap และ JavaScript เพื่อคำนวณพื้นที่ของวงกลม โดยมีการใช้งาน jQuery เพื่อให้ Bootstrap ทำงานได้อย่างถูกต้อง คุณสามารถนำโค้ดนี้ไปใช้งานได้โดยตรง และสามารถปรับแต่งหรือเพิ่มความสามารถตามต้องการได้ตามต้องการของคุณ โดยมีการใช้ Bootstrap เพื่อให้การแสดงผลมีการจัดรูปแบบที่ดีและสวยงามในอุปกรณ์ทุกขนาด ตั้งแต่คอมพิวเตอร์ไปจนถึงมือถือและแท็บเล็ต

สามารถสร้างโปรแกรมหาพื้นที่ของวงกลมได้ด้วย Bootstrap ด้วยภาษา HTML, CSS, และ JavaScript ดังนี้

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calculate Circle Area with Bootstrap</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">
    <div class="row">
      <div class="col-md-6 mx-auto">
        <div class="card">
          <div class="card-header">
            <h4>Circle Area Calculator</h4>
          </div>
          <div class="card-body">
            <div class="form-group">
              <label for="radius">Enter the radius of the circle:</label>
              <input type="number" class="form-control" id="radius" placeholder="Enter radius">
            </div>
            <button class="btn btn-primary" onclick="calculateArea()">Calculate</button>
          </div>
          <div class="card-footer">
            <h5>Area: <span id="result"></span></h5>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap JS and jQuery (for Bootstrap functionality) -->
  <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 calculateArea() {
      const radius = document.getElementById("radius").value;
      const area = Math.PI * radius * radius;
      document.getElementById("result").textContent = area.toFixed(2);
    }
  </script>
</body>
</html>
 

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

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

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

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

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

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

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

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