Question

我需要一个滑块＆＃34;价格＆＃34;页面，该滑块将调整数量，以便客户可以获得服务的即时报价..

数量应该从1到500或1000，但是输入旁边数量的方框会有所帮助。

另一个问题是我需要不同数量范围的不同价格，

示例：

quantity=1-3 price=20/unit
quantity=4-10 price=17/unit
quantity=11-50 price=15/unit

依旧......

到目前为止，我有这个，我甚至不确定我是在几英里之外还是非常接近并且没有意识到这一点......请帮忙。

    <input type="range" min="1" max="1000" value="1" step="1" onchange="sliderChange(this.value)" style="margin-left:5%; margin-right:5%; width:90%;" />
    <br />
    <br />Slider Value = <span id="sliderStatus">1</span> 
    <p id="demo"></p>

    <script>
      var x = 30;
      var z = x * y;


      if (0 < x) {
        var y = 13;
      }
      if (10 < x < 21) {
        var y = 12;
      }
      if (20 < x < 31) {
        var y = 11;
      }
      if (30 < x < 41) {
        var y = 10;
      }
      document.getElementById("demo").innerHTML = z;
    </script>

Answer 1

你的html调用了sliderChange函数，所以你的JS应该是

Replication

然后，可以使用function sliderChange(number) { if(number > 10 && number < 51) { $(".demo").html((number*15)); } else if(number > 4 && number < 11){ $(".demo").html((number*17)); } else { $(".demo").html((number*20)); } }块的复制和粘贴进行任何更高数量的折扣，并将这些数字简单地更改为您想要的数字，例如（＆＃34;数字> 50＆amp;＆amp;数字<100）

Answer 2

您需要一个功能来调用您的JavaScript。添加如下按钮：

<button onclick="myFunction()">Try it</button>

然后在脚本中调用该函数

    function myFunction() {
         var x = document.getElementById("myRange").value;
         // your code with prices
    }

Answer 3

这是一个开始，应该让你在正确的完成路径上开始：https://jsfiddle.net/adebu2bs/

HTML：

<input id="slider" type="range" min="1" max="1000" value="1" step="1" style="margin-left:5%; margin-right:5%; width:90%;" />
<br />
<br />Slider Value = <span id="sliderStatus">1</span> 
<p id="demo"></p>

jquery的：

$("#slider").on('change',function() {
var selectedQty = $(this).val();
$('#sliderStatus').text(selectedQty);


var itemTotal = 0;
 switch (true) {
    case (selectedQty <= 3) :
        itemTotal = 20 * selectedQty;
        break;
    case (selectedQty <= 10) :
        itemTotal = 17 * selectedQty;
        break;
    default:
        itemTotal = 25 * selectedQty;
        break;
  }
  alert(itemTotal);
  $('#demo').text(itemTotal);
});

数量html / java / php的价格折扣

3 个答案: