0

我想将每天的分钟数（其值由滑块定义）乘以指定的数字（如 0.05）。然后我想将它乘以 30，这样就可以得到粗略的每月估计。然后我想在底部附近的“估计每月账单”段落旁边显示该值。

前任。 

monthlyEstimate = slidervalue * .05 * 30

滑块是从 jQuery UI 网站借来的。这是代码：

 <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 更新名为estimate 的跨度。*是 javascript 中的乘法运算符。在下面的代码中，替换SOME_CONSTANT为您需要的任何内容。大多数十进制数字，例如。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 回答