วิธีการ ใช้งาน Jquery คำนวณเลขฐาน 2 8 16

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
Ittichai_chupol
PHP VIP Members
PHP VIP Members
Posts: 3114
Joined: 19/09/2018 10:33 am

วิธีการ ใช้งาน Jquery คำนวณเลขฐาน 2 8 16

Post by Ittichai_chupol » 04/12/2019 6:58 pm

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

โดยภาษาคอมพิวเตอร์ที่จะใช้งานในการพัฒนาเว็บไซต์ นั้นมีอยูู่มากมาย แต่ที่นิยมกันมาเลยก็จะมีอยู่นั้นก็คือ อย่างเช่น ถ้าหากต้องการจะทำให้มีการแสดงผลให้ผู้ใช้งานได้เห็นจะใช ภาษา html หรือถ้าหากต้องการจะปรับรูปแบบเพิ่มทสีสัน หรือตกแต่งสิ่งต่างๆบนหน้าเว็บไซต์มีความสวยงาม ดูดี ร่วมทั้งสามารถทีจะนำไปเเสดงยั่งอุปกรณ์ต่างๆ ที่มีจอแสดงต่างขนาดก็จะใช ภาษา css ช่วย และหากเป็นการจัดการข้อมูลนั้นหรือระบบการงานเบื่องหลังนันก็จะมีภาษาคอมพิวให้เลือกมากมาย ทั้ง php python และอีกหลายๆ
และถ้าหากต้องการที่จะสร้างลูกเล่น เพื่อเพิ่มความสนใจและอำนวยความความสะดวกกับผู้ใช้งานนั้น นั้นก็จะใช้ javascript jquery มาใช้ในการพัฒนา

ตัวอย่างโคด html

Code: Select all

        <div>
            <form action="" name="frmMain" id="frmMain" method="post"> 
                <label for="fname"> กรอกตัวเลข </label>
                <input type="text" id="fname" name="firstname" placeholder="กรอกตัวเลข">
                <label for="country">แปลงเป็น : </label>
                <select id="country" name="country">
                    <option value="decbin">เลขฐาน 2 </option>
                    <option value="decoct">เลขฐาน 8 </option>
                    <option value="dechex">เลขฐาน 16</option>
                </select>
                <input type="text" id="result" name="" value="00">
                <input type="submit" id="btnSend"  value="Submit">
            </form>
        </div>

ตัวอย่างโคด css

Code: Select all

        <style>
            input[type=text], select {
                width: 100%;
                padding: 12px 20px;
                margin: 8px 0;
                display: inline-block;
                border: 1px solid #ccc;
                border-radius: 4px;
                box-sizing: border-box;
            }

            input[type=submit] {
                width: 100%;
                background-color: #4CAF50;
                color: white;
                padding: 14px 20px;
                margin: 8px 0;
                border: none;
                border-radius: 4px;
                cursor: pointer;
            }

            input[type=submit]:hover {
                background-color: #45a049;
            }

            div {
                border-radius: 5px;
                background-color: #f2f2f2;
                padding: 20px;
            }
        </style>
ตัวอย่างโคด jQuery

Code: Select all

        <script src="http://code.jquery.com/jquery-latest.min.js"></script> //เรียกใช้งาน library javascrit

        <script type="text/javascript">
            $(document).ready(function () {
//                 $("#result").hide();
                $("#btnSend").click(function () {  //ตรวจสอบว่ามีการกดที่ปุ่มที่มี id ว่่า btnSend หรือไม
                    $.ajax({
                        type: "POST",
                        url: "test_php.php", //ไฟล์ที่ต้องการส่งค่าไป
                        data: $("#frmMain").serialize(),
                        success: function (result) {
                           var ras = result.message;  
                           $("#result").val(ras);
                        }
                          
                    });

                });

            });
        </script>

ผลลัพธ์ที่ได้
ezgif.com-video-to-gif (12).gif
ezgif.com-video-to-gif (12).gif (36.96 KiB) Viewed 946 times
บทความที่เกี่ยวข้อง
การใส่ค่าในช่อง input ด้วย javascript เพื่อจะได้มีค่าอยู่ใน textbox
ทำเอฟเฟค ตอนกดปุ่ม
คำสั่งจัดการฐานข้อมูล MySQL

Return to “Jquery & Ajax Knowledge”

Users browsing this forum: No registered users and 4 guests