1

そのため、値を設定するための2つのスライダーと4つのラジオボタンを備えたWebページがあります。これらのラジオボタンは、計算操作と[計算]ボタンを選択するのに役立ちます。スライダーの値と選択された操作を検出し、それに応じて値を計算し、[計算]ボタンを押してラベルに出力するにはどうすればよいですか？注：私はjavascript/jqueryで完全に新鮮です。

コード：

   <!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>
4

1 に答える 1

0

多くの人があなたがあなたの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内のhead / html / bodyタグを削除しました）をここで見つけることができます：http：//jsfiddle.net/k9rGx/9/

<head></head>.jsファイルと.cssファイルをタグでサイトの上部に1回だけリンクする必要があることを忘れないでください。javascriptを使用するたびにそれを行う必要はありません。サイト全体で機能します。

それがあなたが何か新しいことを学ぶのに役立つことを願っています。

于 2013-03-18T08:25:32.800 に答える