0

値がスライダーによって定義されている 1 日あたりの分数に、指定された数値 (0.05 など) を掛けたいと考えています。次に、これに 30 を掛けて、おおまかな月次見積もりを作成します。次に、その値を、下部近くの「推定月次請求書」段落の横に表示したいと思います。

元。 

monthlyEstimate = slidervalue * .05 * 30

スライダーは jQuery UI Web サイトから借用しています。コードは次のとおりです。

 <head>
    <script>
$(function() {
    $( "#slider-range-min" ).slider({
        range: "min",
        value: 1,
        min: 1,
        max: 150,
        slide: function( event, ui ) {
            $( "#amount" ).val( "" + ui.value );
        }
    });
    $( "#amount" ).val( "" + $( "#slider-range-min" ).slider( "value" ) );
     });
</script>

</head>



<body>
    <style>
    #slider-range-min{
    width: 200px;
    height:10px;
    }
    </style>
     <div id="estimate">

    <p>
        <label for="amount">Minutes Per Day:</label>
        <input type="text" id="amount" style="border: 0; color: #B01D63; font-family: Signika;" />
    </p>

    <div id="slider-range-min"></div>
    <br />


 <p>
    Estimated Monthly Bill:     
 </p>
4

2 に答える 2

1

推定月次請求書テキストの下にスパンを追加して、指定された場所に値を入力できるようにします。

HTML

<p>
    Estimated Monthly Bill:
    <span id="EstimatedMonthlyBill"></span>
</p>

次に、スライダーのスライド プロパティを変更して計算を行い、値を挿入します。

Javascript

$(function() {
    $("#slider-range-min").slider({
        range: "min",
        value: 1,
        min: 1,
        max: 150,
        slide: function(event, ui) {
            $("#amount").val("" + ui.value);

            var estimatedMonthlyBill = Math.round(100 * (parseFloat(ui.value)  * .05 * 30)) / 100;

            $("#EstimatedMonthlyBill").text(estimatedMonthlyBill);
        }
    });
    $("#amount").val("" + $("#slider-range-min").slider("value"));
});

デモ
http://jsfiddle.net/2FMRU/

于 2012-11-18T23:25:17.833 に答える
0

変化する

 <p>
  Estimated Monthly Bill:     
 </p>

に

<p>
 Estimated Monthly Bill: <span id='estimate'></span>
</p>

jQuery を使用して、スライダーを動かしたときに推定という名前のスパンを更新します。*JavaScript での乗算の演算子です。SOME_CONSTANT以下のコードで、必要なものに置き換えます。ほとんどの 10 進数など。100.234、正常に0.00005動作するはずです。

変化する

slide: function( event, ui ) {
        $( "#amount" ).val( "" + ui.value );
    }

このようなものに：

slide: function( event, ui ) {
        $( "#amount" ).val( "" + ui.value );
        $("#estimate").val("" + (ui.value*SOME_CONSTANT*30) );
}

スライダーを動かすと、<span id='estimate'>が更新され、計算された値が表示されます。

これがあなたが探していたものであることを願っています。

于 2012-11-18T23:25:44.017 に答える