计算器上的最小值和最大值，无需提交答案

【问题标题】：Min and max value on calculator without submitting计算器上的最小值和最大值，无需提交
【发布时间】：2014-08-28 09:29:20
【问题描述】：

所以我正在为一个学校项目开发一个计算器，这个想法是你可以输入数字，它会自动产生一个价格。当我使用滑块时效果很好，但我希望能够输入您自己的数字。

如果没有提交按钮的数字超过最大值和最小值，我如何让计算器检查表单。就像我将最大值设置为 200 一样，例如，您一定不能填写 230。它适用于箭头按钮，但当您自己填写时，您可以填写任何您想要的内容。

它需要以某种方式检查，但我不知道如何，看看代码。

  $(".priceslider").change(function () {

      var width = $("#width").val();
      var height = $("#height").val();
      var number = $("#number").val();

      var sale = (110 - (10 * number)) / 100;

      var pricex = ((width * height / 100) * sale) * number;

      if (pricex < 30) {
            var price = 30;
      } else {
            var price = pricex;
      }

      $("#txtWidth").text(width + ' cm');
      $("#txtHeight").text(height + ' cm');
      $("#txtNumber").text(number + ' st');
      $("#txtPrice").text('$' + price.toFixed(0));
  });

【问题讨论】：

标签： html calculator

【解决方案1】：

您需要手动限制超出范围的值，如下所示：

脚本：

if (parseInt($(this).val()) > parseInt($(this).attr("max"))) {
     $(this).val($(this).attr("max"));
} else if (parseInt($(this).val()) < parseInt($(this).attr("min"))) {
     $(this).val($(this).attr("min"));
}

Working Demo

【讨论】：

【解决方案2】：

检查更改事件中的最大值。如果有溢出，去掉最后一位数字

 <body>

<div>
    <label id="lblBreedte">Breedte:</label>
    <input class="prijsslider" type="number" id="sliBreedte" value="30" min="30" max="200" />
    <label id="txtBreedte">30 cm</label>
</div>
<div>
    <label id="lblHoogte">Hoogte:</label>
    <input class="prijsslider" type="number" id="sliHoogte" value="61" min="61" max="134" />
    <label id="txtHoogte">61 cm</label>
</div>
<div>
    <label id="lblAantal">Aantal:</label>
    <input class="prijsslider" type="number" id="sliAantal" value="1" min="1" max="4" />
    <label id="txtAantal">1 st</label>
</div>
<hr />
<div>
    <label id="lblPrijs">Prijs:</label>
    <label id="txtPrijs">€30</label>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
  $(".prijsslider").change(function () {

      if (parseInt($(this).val()) > parseInt($(this).attr("max"))) {

         $(this).val($(this).val().substr(0, strlen($(this).val()) - 1));

      }

      var breedte = $("#sliBreedte").val();
      var hoogte = $("#sliHoogte").val();
      var aantal = $("#sliAantal").val();

      var korting = (110 - (10 * aantal)) / 100;

      var prijsx = ((breedte * hoogte / 100) * korting) * aantal;

      if (prijsx < 30) {
            var prijs = 30;
      } else {
            var prijs = prijsx;
      }

      $("#txtBreedte").text(breedte + ' cm');
      $("#txtHoogte").text(hoogte + ' cm');
      $("#txtAantal").text(aantal + ' st');
      $("#txtPrijs").text('€' + prijs.toFixed(0));
  });
</script>

</body>

【讨论】：