ข้ามไปที่เนื้อหาหลัก

หาค่ามากที่สุด Max ด้วย JavaScript + jQuery - สอน JavaScript

สำหรับบทความนี้จะมาสาธิตการใช้ JavaScript กับ jQuery ในการหาค่าที่มากที่สุด หรือ Max Value ของ Input ที่กำหนดไว้ด้วยแอตทริบิวต์ Class ซึ่งจะใช้วิธีที่แตกต่างกันถึง 3 วิธี

  1. วนลูปด้วย each ของ jQuery และเปรียบเทียบค่ามากที่สุด
  2. วนลูปด้วย each ของ jQuery แล้วเก็บเป็นอาร์เรย์ แล้วใช้ฟังก์ชั่นทางคณิตศาสตร์ Math เพื่อเลือกค่าที่สุดจากอาร์เรย์
  3. ใช้ฟังก์ชั่น map ของ jQuery ดัง value ของ textbox ทุกตัวที่กำหนดไว้ด้วย class เดียวกันออกมาเป็นอาร์เรย์แล้วใช้ฟังก์ชั่นทางคณิตศาสตร์ Math เพื่อเลือกค่าที่สุดจากอาร์เรย์




--------------------------------------------------------------
ตัวอย่างหน้าแสดงผล 
--------------------------------------------------------------
ฟังก์ชั่นสำหรับหาค่าสูงสุดด้วย JavaScript








--------------------------------------------------------------
ซอร์สโค๊ด JavaScript + Html ทั้งหมด 
--------------------------------------------------------------
 <script>
function findMaxValue() {
    var maxValue = 0;
    $('.score').each(function(indexInArray) {
        var val = $(this).val();
        val = parseInt(val);//parseFloat();
        if (maxValue === 0 || maxValue < val) {
            maxValue = val;
        }
    });
    return maxValue;
}

function findMaxValue2() {
    var _array = [];
    $('.score').each(function(indexInArray) {
        _array.push(parseInt($(this).val()));
    });
    return Math.max.apply(Math,_array);
}

function findMaxValue3() {
    var _array = $( ".score" ).map(function() {
                    return parseInt($( this ).val());
                  });
    return Math.max.apply(Math,_array);
}

</script>

<table width="100%">
<tr>
<td width="30%" valign="top">
ฟังก์ชั่นสำหรับหาค่าสูงสุดด้วย JavaScript
<div id="center">
    <input class="score" value="10" name="test" type="text"><br>
    <input class="score" value="32" type="text"><br>
    <input class="score" value="20" type="text"><br>
    <input class="score" value="40" type="text"><br>
    <input class="score" value="49" type="text"><br>
    <input class="score" value="8" type="text"><br>
    <input class="score" value="10" type="text"><br>
</div>
<h4 id="result"></h4>
<h4 id="result2"></h4>
<h4 id="result3"></h4>

<input type="button" onclick="process()" value="วิธีที่ 1"/>
<input type="button" onclick="process2()" value="วิธีที่ 2"/>
<input type="button" onclick="process3()" value="วิธีที่ 3"/>

</td>
<td valign="top">
<div id="process1" style="display:none">
วิธีที่ 1:
<textarea style="width:100%;height:160px">
    var maxValue = 0;
    $('.score').each(function(indexInArray) {
        var val = $(this).val();
        val = parseInt(val);//parseFloat();
        if (maxValue === 0 || maxValue < val) {
            maxValue = val;
        }
    });
    return maxValue;
</textarea>
</div>
<div id="process2" style="display:none">
วิธีที่ 2:
<textarea style="width:100%;height:117px">
    var _array = [];
    $('.score').each(function(indexInArray) {
        _array.push(parseInt($(this).val()));
    });
    return Math.max.apply(Math,_array);
</textarea>
</div>
<div id="process3" style="display:none">
วิธีที่ 3:
<textarea style="width:100%;height:108px">
    var _array = $( ".score" ).map(function() {
                    return parseInt($( this ).val());
                  });
    return Math.max.apply(Math,_array);
</textarea>
</div>
</td>
</tr>
</table>


<script>

function process(){
    $('#result').html("1) ค่าสูงสุด คือ : " + findMaxValue());
    $('#process1').show();
}


function process2(){
    $('#result2').html("2) ค่าสูงสุด คือ : " + findMaxValue2());
    $('#process2').show();
}

function process3(){
    $('#result3').html("3) ค่าสูงสุด คือ : " + findMaxValue3());
    $('#process3').show();
}


</script>


อ้างอิง
  • http://api.jquery.com/map/
  • http://stackoverflow.com/questions/11985341/get-max-and-min-value-from-array-in-javascript
  • http://www.w3schools.com/jsref/jsref_push.asp
ป้ายกำกับ:

ความคิดเห็น

แสดงความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

แจกฟรี!! ระบบต่างๆที่พัฒนาด้วย PHP สำหรับนำไปใช้ในงานต่างๆ

       สำหรับหลายท่านที่ขอโค้ดเข้ามาทาง Inbox ของเฟซบุ๊กแฟนเพจ หรือถามถึงระบบต่างๆหลังไมค์มานั้น ส่วนใหญ่ก็มีแจกอยู่แล้วในเว็บบอร์ด ThaiCreate.Com นะครับ และด้านล่างนี้ก็เป็นระบบต่างๆที่แจกให้นำไปลองใช้ลองศึกษากันครับ
แสดงความคิดเห็น
Read more »

สร้างแบบฟอร์มล็อกอิน HTML + PHP

       ผมจะสร้างระบบตัวอย่างเพื่อแสดงให้เห็นการทำงานของสคริปต์ PHP ที่ใช้ในการล็อกอินอย่างง่ายๆ นะครับ โดยที่ผมจะสร้างโฟลเดอร์ใหม่ขึ้นในไดร์ฟที่เราได้กำหนดให้เป็น Directory Root สำหรับรันสคริปต์ PHP ซึ่งผมกำหนดเอาไว้ที่ D:\www ดังนั้นผมจะสร้างโฟลเดอร์ teacher_assistant ขึ้นมาใหม่จะได้พาธเป็น D:\www\teacher_assistant สำหรับการเข้าถึง จะใช้ URL ดังนี้ http://localhost/teacher_assistant หลังจากสร้างโฟลเดอร์เสร็จเรียบร้อยก็จะเริ่มกระบวนการเตรียมโครงสร้างโปรเจ็กต์ด้วยเครื่องมือช่วยเขียนโปรแกรมชื่อว่า eclipse ซึ่งดูวิธีการสร้างโปรเจ็กต์ได้จากบทความ เริ่มต้นสร้างโปรเจ็กต์ ด้วยโปรแกรม eclipse เครื่องมือเขียนโปรแกรม php ในบทความเป็นการสร้างโปรเจ็กต์ที่มีพาธเป็นโฟลเดอร์ login แต่ในที่นี้ต้องเป็นพาธให้ตรงกับโฟลเดอร์ใหม่ที่เราได้สร้างขึ้นด้วยนะครับ
2 ความคิดเห็น
Read more »

PHP กับการคิดส่วนลดเป็นเปอร์เซ็น 5%, 10%, 20% ตามช่วงราคาที่กำหนด

<?php     $total_price = 1000;     $discount = 0;         if($total_price >= 500 && $total_price < 1001){         $discount = 5;     }elseif($total_price >= 1001 && $total_price <= 5000){         $discount = 10;     }elseif($total_price >= 5001){         $discount = 20;     }         $discount_bath = ($total_price*$discount)/100; ?> <pre> ซื้อสินค้าครบ 0 ถึง 499 บาท ไม่ได้ส่วนลด ซื้อสินค้าครบ 500 ถึง 1000 บาท ได้ส่วนลด 5% ซื้อสินค้าครบ 1001 ถึง 5000บาท ได้ส่วนลด 10% ซื้อสินค้าครบ 5001 บาทขึ้นไป ได้ส่วนลด 20% </pre> <h3>รวมราคาสินค้า = <?php echo number_format($total_price,2);?></h3> <h5>ส่วนลด = <?php echo $discount;?>%  (<?php echo $discount_bath;?> บาท)</h5> <h2>ราคาหลังส่วนลด = <?php echo number_format($total_price - $discount_bath,2);?>บาท</h2> "PHP ไม่ได้สร้างสุดยอดโปรแกรม แต่ PHP ช่วยให้งานคุณง่ายขึ้นต
แสดงความคิดเห็น
Read more »