Question

我想将每天的分钟数（其值由滑块定义）乘以指定的数字（如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>

Answer 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/

Answer 2

更改

 <p>
  Estimated Monthly Bill:     
 </p>

要

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

我们将使用jQuery来更新滑块移动时命名估计的跨度。 *是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) );
}

移动滑块后，{[1}}将更新以显示计算值。

我希望这就是你要找的东西。

如何将jQuery滑块值乘以定义的变量？

2 个答案: