Question

我很难在用户输入时向用户显示一些实时信息，我相信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>

结果如下：

Answer 1

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

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>

Answer 2

JSFIDDLE

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

    <label>Value</label>
    <input type="text" name='val'>

    <label>Discount</label>
    <input type="text" name='disc'>

    <label>Percentage</label>
    <input type="text" name='perc'>

    <label>Liquid</label>
    <input type="text" name='liquid'>

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

Javascript for it

let val = document.getElementsByName('val')[0];
let disc = document.getElementsByName('disc')[0];
let perc = document.getElementsByName('perc')[0];
let liq = document.getElementsByName('liquid')[0];

val.addEventListener('change', function() {
    if (disc.value != '') {
        perc.value = ((this.value - disc.value) * .015).toFixed(2);
    liq.value = (this.value - disc.value - perc.value).toFixed(2);
  }
});

disc.addEventListener('change', function() {
    if (val.value != '') {
        perc.value = ((val.value - this.value) * .015).toFixed(2);
    liq.value = (val.value - this.value - perc.value).toFixed(2);
  }
});

Answer 3

这也适用于较旧的浏览器：

＆＃13;

//<![CDATA[
// external.js
var doc, bod, E, pre = onload; // for use on other loads
onload = function(){
if(pre)pre(); // change pre var name if using technique on other pages

doc = document; bod = doc.body;
E = function(id){
  return doc.getElementById(id);
}
var frm = E('value_calc'), val = E('val'), dis = E('dis'), prc = E('prc');
var lqd = E('lqd'), fe = frm.elements, ps = Math.pow(10, 17);
function cF(){
  var v = +val.value, dv = (v*ps-dis.value*ps)/ps, pv = prc.value = dv*0.015;
  lqd.value = ((dv*ps-pv*ps)/ps).toFixed(2);
}
frm.onsubmit = function(){
  cF();
  return false;
}
for(var i=0,l=fe.length; i<l; i++){
  (function(){
    var fi = fe[i];
    if(fi.type === 'text' && !fi.readonly){
      fi.onchange = cF;
    }
  }());
}

}
//]]>

＆＃13;

/* external.css */
html,body{
  padding:0; margin:0;
}
.main{
  width:960px; background:#000; color:#fff; padding:20px; margin:0 auto;
}
input[type=text]{
  margin-right:10px;
}

＆＃13;

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <meta name='viewport' content='width=device-width' />
    <title>Strange Value Calculator</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script type='text/javascript' src='external.js'></script>
  </head>
  <body>
    <div class='main'>
     <form method='post' id='value_calc' name='value_calc'>
       <label for='val'>Value</label><!-- breaking a line here cases a white space in code -->
       <input id='val' name='val' type='text' />
       <label for='dis'>Discount</label>
       <input id='dis' name='dis' type='text' />
       <label for='prc'>Percentage</label>
       <input id='prc' name='prc' type='text' />
       <label for='lqd'>Liquid</label>
       <input id='lqd' name='lqd' type='text' readonly='readonly'/>
       <input id='sub' name='sub' type='submit' value='Submit' />
      </form>
    </div>
  </body>
</html>

＆＃13;

显示实时值

3 个答案: