我很难在用户输入时向用户显示一些实时信息,我相信Java脚本在这种情况下会很有用,但是由于我是这种语言的外行,所以所有帮助都是值得的。

例如,用户在value字段1300和discount字段100中键入。

percentage中,我需要执行以下操作:价值-折扣* 1.5%
(1300-100 = 1200 * 1.5%= 18)

liquid中,我需要执行以下操作:值-折扣-百分比
(1300-100 = 1200-18 = 1182)

返回的值将只能读取两位小数。

我的代码:

<form method="post" action="process.php">

<label>Value</label>
<input type="text">

<label>Discount</label>
<input type="text">

<label>Percentage</label>
<input type="text">

<label>Liquid</label>
<input type="text">

<button type="submit">Submit</button>
</form>


结果将如下所示:

javascript - 显示实时值-LMLPHP

最佳答案

我做了一些小的修改,只允许数字,并将最后两个输入设置为只读。



var value = document.getElementById("value");
var discount = document.getElementById("discount");
var percentage = document.getElementById("percentage");
var liquid = document.getElementById("liquid");

function calc() {
  if (!value.value || !discount.value) {
    return;
  }

  percentage.value = ((value.value - discount.value) * 0.015).toFixed(2);
  liquid.value = (value.value - discount.value - percentage.value).toFixed(2);
}

value.addEventListener("change", calc);
value.addEventListener("keyup", calc);
discount.addEventListener("change", calc);
discount.addEventListener("keyup", calc);

<form method="post" action="process.php">

<label>Value</label>
<input type="number" id="value" name="value">

<label>Discount</label>
<input type="number" id="discount" name="discount">

<label>Percentage</label>
<input type="number" id="percentage" name="percentage" readonly>

<label>Liquid</label>
<input type="number" id="liquid" name="liquid" readonly>

<button type="submit">Submit</button>
</form>

关于javascript - 显示实时值,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46459742/

10-12 12:53
查看更多