19 Aug

การทำโปรแกรมคำนวณค่างวดรถด้วย Jquery

บทความนี้จะสอนเกี่ยวการใช้ jquery ในการทำแบบฟอร์มคำนวณหาค่่างวดรถต่อเดือนแบบง่ายๆ ใช้  html + css + js(jquery)

สูตรในการคำนวณค่าที่ผมใช้จะเป็นวิธีการคำนวณแบบนี้

ราคาจ่ายจริง = ราคารถ – เงินดาวน์
ดอกต่อต่อเดือน = ราคาจ่ายจริง*อัตราดอกเบี้ย
ดอกเบี้ยทั้งหมด = ดอกต่อต่อเดือน * จำนวนงวดที่ผ่อน
ยอดรวมทั้งหมด = ดอกเบี้ยทั้งหมด + ราคาจ่ายจริง
ผ่อนต่องวด = ยอดรวมทั้งหมด / จำนวนงวดที่ผ่อน

เรามาดูตัวอย่างที่เสร็จแล้วครับ CLICK

ส่วนประกอบของหน้าจอก็มี 3  ส่วน

1 . ทำ input  text ทั้งหมด 4 ช่อง ซึ่งมี id ด่างกันเพื่อให้เขาถึงค่าของแต่ละช่องได้

2 . ปุ่ม คำนวณ จะ add Event Click (เมื่อเกิดการ Click จะทำการดึงค่ามาคำนวณ และส่งไปยังส่วนแสดงผลด้านล่าง)

3 . ส่วนแสดงผลที่พื้นหลังเป็นสีเทา

ตัวอย่าง code

<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
 
  <title>คำนวนค่างวดรถ</title>
 
 
    <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
    
    <script>
          
          
          $(document).ready(function(){  

                 // event สำหรับปุ่มคำนวณ
                $("#calstart").click( function (){
                
                       // ราคารถ
                       var carprice = $("#carprice").val();
                       // เงินดาวน์
                       var cardeposit = $("#cardeposit").val();
                       // ดอกเบี้ยต่อเดือน
                       var carinterest = $("#carinterest").val();
                       // จำนวนงวดที่ผ่อน / เดือน
                       var carpay = $("#carpay").val();
                
                
                       // ราคาเงินดาวร์ ราคารถลบเงินดาว จะเหลือเงินที่ต้องกู้
                       var carrealprice =   carprice - cardeposit;
                       
                       // หาดอกเบี้ยต่อเดือนจากราคารถ
                       var carinterestmonth = (carrealprice * parseFloat(carinterest))/100;
                       
                       
                       // หาดอกเบี้ยทั้งหมด ในระยะงวดผ่อน
                       var carinterestall =   carinterestmonth * carpay ;
                       
                       // ราคารวมทั้งหมดที่ต้องจ่าย นำราคารถหลักหักดาวร์ + ดอกเบี้ยทั้งปี
                       var allprice =     carrealprice+carinterestall;
                       
                        // ส่วนแสดงผล
                        $(".res1").html(carrealprice);
                        $(".res2").html(carinterestmonth);
                        //จำนวนเงินที่ต้องผ่อนแต่ละเดือน  ราคารถรวมดอกเบี้ย / เดือน
                        $(".res3").html(allprice/carpay);
                
                
                });

             
          });
    
    </script>
    
    <style>
          /* css สำหรับแต่งหน้าจอ *?
          *{margin:0;padding:0;}
          .warp{width:80%;max-width:750px;margin:45px auto;}
          .warp p{padding:5px 5px;}
          .warp span{ display:inline-block;margin-right:2%;width:20%; }
          .warp input{width:70%;padding:3px 5px; border-radius:5px;}
          .warp a{display:inline-block;padding:5px 15px;background:red;color:#fff;margin-top:10px;text-decoration:none;}
    </style>
 
  </head>
  <body>


     <div class="warp">
     
     <!-- ส่วน 1 Input   -->
         <p><span>ราคารถ</span><input type="text" id="carprice"></p>
         <p><span>เงินดาวน์</span><input type="text" id="cardeposit"></p>
         <p><span>ดอกเบี้ย / เดือน</span><input type="text" id="carinterest"></p>
         <p><span>จำนวนงวด / เดือน</span><input type="text" id="carpay"></p>
      <!-- ส่วน 2 ปุ่มคำนวณ -->  
         <a href="#" id="calstart">คำนวณ</a>
      <!-- ส่วน 3 แสดงผล -->    
         <div style="background:gray;margin-top:15px;">
             <p>ราคารถหลังหักเงินดาวร์ : <span class="res1"></span></p>
             <p>ดอกเบี้ยต่อเดือน : <span class="res2"></span></p>
             <p>ผ่อนเดือนละ : <span class="res3"></span></p>
         </div>
     
     </div>


  </body>
</html>

บทความนี้เป็นการทำงานแบบง่ายๆ เป็นพื้นฐานในการพัฒนาต่อไป

ในการจะใช้จริงจำเป็นต้องทำอีกหลายเรื่องเช่น validate input ข้อมูลว่าเป็นตัวเลขหรือเปล่า การทำ ui ให้ใช้ง่าย เป็นต้น

 

Leave a Reply

Your email address will not be published. Required fields are marked *