数量价格折扣html/java/php

Question

我需要在我的“价格”页面上的滑块，那个滑块将调整数量，以便客户可以获得一个即时报价的服务。

数量应该在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应该是

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));
    }
}

然后，任何更高的数量折扣都可以通过复制和粘贴else if块进行，只需将这些数字更改为您想要的数字，例如(“number > 50 && number < 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);
});