使用JQuery進行計算/ javascript

所以，我有一個帶有兩個滑塊的網頁，用於設置數值和四個單選按鈕，用於選擇計算操作和「計算」按鈕。如何檢測滑條值和選擇哪個操作，然後相應地計算這些值並將它們輸出到「計算」按鈕的標籤上？注意：我對javascript/jquery完全新鮮。使用JQuery進行計算/ javascript

代碼：

<!doctype html> 

<html> 
    <head> 
     <meta charset="utf-8" /> 
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
     <link rel="stylesheet" href="/resources/demos/style.css" /> 
     <script> 
       $(function() { 
        $("#slider-range-max").slider({ 
         range: "max", 
         min: 1, 
         max: 1000, 
         value: 0, 
         slide: function (event, ui) { 
          $("#amount").val(ui.value); 
         } 
        }); 
        $("#amount").val($("#slider-range-max").slider("value")); 
       }); 
     </script> 
    </head> 
    <body> 
     <p> 
      <label for="amount">First value:</label> 
      <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" /> 
     </p> 
     <div id="slider-range-max"></div> 
    </body> 
</html> 


<html> 
    <head> 
     <meta charset="utf-8" /> 
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
     <link rel="stylesheet" href="/resources/demos/style.css" /> 
     <script> 
      $(function() { 
       $("#slider-range-max2").slider({ 
        range: "max", 
        min: 1, 
        max: 1000, 
        value: 0, 
        slide: function (event, ui) { 
         $("#amount2").val(ui.value); 
        } 
       }); 
       $("#amount2").val($("#slider-range-max2").slider("value")); 
      }); 
     </script> 
    </head> 
    <body> 
     <p> 
      <label for="amount">Second value:</label> 
      <input type="text" id="amount2" style="border: 0; color: #f6931f; font-weight: bold;" /> 
     </p> 
     <div id="slider-range-max2"></div> 
    </body> 
</html> 


<br /> 
<br /> 
<br /> 
<div id=operacija"> 
    Choose operation:<br /> 
    <br /> 
    <html> 
     <head> 
      <meta charset="utf-8" /> 
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
      <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
      <link rel="stylesheet" href="/resources/demos/style.css" /> 
      <script> 
       $(function() { 
        $("#radio").buttonset(); 
       }); 
      </script> 
     </head> 
     <body> 
     <form> 
      <div id="radio"> 
      <input type="radio" id="radio1" name="radio" /><label for="radio1">Addition</label> 
      <input type="radio" id="radio2" name="radio" /><label for="radio2">Substraction</label> 
      <input type="radio" id="radio3" name="radio" /><label for="radio3">Multiplication</label> 
      <input type="radio" id="radio4" name="radio" /><label for="radio4">Division</label> 
      </div> 
     </form> 
     </body> 
    </html> 
</div> 
<br /> 
<br /> 

<div id="gumb1"> 
<!doctype html> 

<html> 
    <head> 
     <meta charset="utf-8" /> 
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
     <link rel="stylesheet" href="/resources/demos/style.css" /> 
     <script> 
       $(function() { 
        $("button").button().click(function (event) { 
        event.preventDefault(); 
       }); 
       }); 
     </script> 
    </head> 
    <body> 
     <button>Calculate</button> 
    </body> 
</html> 
</div> 

<br /> 
<br /> 
<div id=rezultat"> 
    <label for="amount">Result:</label> 
    <input type="text" id="Text1" style="border: 0; color: #f6931f; font-weight: bold;" /> 
</div>

來源

2013-03-17 cvenko

在你的滑塊中你正在做'min：1，max：1000，value：0，';即您將初始_value_設置爲低於_minimum_。此外，這看起來不像有效的HTML - 多個「」元素，「」元素和「<！doctype ..」。您還多次包含腳本。這是多頁還是隻有一頁？ – 2013-03-17 22:07:01

它只有1頁。 – cvenko 2013-03-17 22:15:46

這就是這個頁面的樣子：http://shrani.si/f/3L/3i/36jR3xsi/sample.png – cvenko 2013-03-17 22:19:52

我知道很多人說，你應該在你的HTML工作。我也這麼認爲，但是我在學習時學到了很多看例子（javascript或者php）。所以我決定告訴你如何做到這一點。當然，你會從中學習，或者複製它並使用。隨你便。我只希望你會嘗試去理解它。

$("button").button().click(function (event) { 
    event.preventDefault(); 
    var value1 = parseInt($("#amount").val()); //get value of first slider 
    var value2 = parseInt($("#amount2").val()); //value of second slider 
    var result = 0; 
    var radioval = $('input[name=radio]:checked', '#myForm').val(); //get value of the radio bytton 

    //calculations depending of chose of the radio button 
    if (radioval == "Addition") result = value1 + value2; 
    else if (radioval == "Substraction") result = value1 - value2; 
    else if (radioval == "Multiplication") result = value1 * value2; 
    else if (radioval == "Division") result = value1/value2; 

    $("#resultlabel").text("Result: " + result); //show result 
});

整個代碼，有一些修正（我刪除了裏面的div頭/ HTML/body標籤），你可以在這裏找到：http://jsfiddle.net/k9rGx/9/

記住，你只需要一次鏈接的.js和.css文件，在<head></head>標籤，在網站頂部。你不需要每次使用javascript都做。它適用於整個網站。

我只希望它能幫助你學習新東西。

來源

2013-03-18 08:25:32 Kedor

使用JQuery進行計算/ javascript

回答

相關問題