使用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

回答

相关问题