数学输入,计算和输出带分数/小数的Javascript

时间:2016-07-17 07:14:26

标签: javascript math calculator

我想知道Javascript中的程序是否有可能接收分数作为输入并使用这些分数来计算某些值。我试图制作一个百分比差异(物理)的计算器,它使用公式((| max-min |)/((max + min)/ 2))* 100。我已经了解了如何操作输入并将其拆分为数组。因此,我将最大值和最小值存储在val1和val2中。但是,问题在于计算。最初我把整个公式集中在一个声明中,但它没有用。因此,我将计算分为几个步骤,并在每个步骤之后将值存储在变量中,以确保它正确地进行计算。这就是我所拥有的:

var step1=Math.abs(val1-val2);
var step2=val1+val2;
var step3=step2/2;
var step4=step1/step3;
var final=Math.round(step4*100*100)/100;

然而,计算仍然存在很多问题,尤其是分数和小数。例如,输入90/100和89/100时的百分比值与放置9/10和89/100时的FAR不同。有时,输入小数会返回NaN。我真的不明白发生了什么。任何人都可以突出显示上述代码在计算百分比差异方面的错误,或者告诉我Javascript如何计算并显示计算与我收到的输出是否一致肯定会有所帮助。

谢谢。 :)

如果有任何帮助,这是该程序的完整代码。如果在解决问题时没有必要,您可以忽略它。我已经删除了代码中所有完全不必要的部分。

<html>

<head>
  <title></title>
</head>
<style type="text/css">
</style>
<script>
  var def;

  function submit() {
    var e = document.getElementById("topic");
    var ter = document.getElementById("term").value;
    var strUser = e.options[e.selectedIndex].value;

    if (!strUser) {
      document.getElementById("textcom").value = "Please specify what needs to be solved.";
    }
    else if (!term) {
      document.getElementById("textcom").value = "Please specify the values used to calculate.";
    }
    else {
      if (strUser == "a") {
        var arr = ter.split(",");
        var val1 = parseInt(arr[0]);
        var val2 = parseInt(arr[1]);

        if (arr.length > 2 || arr.length < 2) {
          def = "Error. Incorrect number of values written.";
        }
        else if (isNaN(val1) || isNaN(val2)) {
          def = "Error. One or more values input is/are not a number.";
        }
        else {
          var step1 = Math.abs(val1 - val2);
          var step2 = val1 + val2;
          var step3 = step2 / 2;
          var step4 = step1 / step3;
          var final = Math.round(step4 * 100 * 100) / 100;
          def = final + "%";
        }
      }
      document.getElementById("textcom").value = def;
    }
  }
</script>

<body>
  <h1>Physics Calculator</h1>
  <span>Please choose desired solution:</span>
  <select id="topic">
    <option disabled selected value>------ Option ------</option>
    <option value="a">Percent Difference</option>
  </select>
  <br>
  <span>Values:</span>
  <input type="text" id="term"></input>
  <br>
  <br>
  <textarea rows="20" cols="40" id="textcom">Uneditable. For output purposes only.</textarea>
  <br>
  <button onclick="submit()">Submit</button>
  <script>
    document.getElementById("textcom").readOnly = "true";
  </script>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

在将12/100应用于它们时,您似乎希望JavaScript将parseInt之类的分数识别为数值。

情况并非如此,因为:

  • 除法(/)是JavaScript(和大多数其他语言)中的运算符,而不是数字符号(如小数.)。数字文字中不允许使用/等字符。
  • 即使您输入数字作为小数(如15.89),函数parseInt也会忽略小数部分 - parseInt的名称已经显示此行为。您应该使用parseFloat或更短,将单一+应用于字符串,该字符串会隐式将其转换为数字。

要解决此问题,您可以编写一个函数,将分数表示法转换为它们所代表的数字。我在下面的代码段中调用了该函数 evaluate

&#13;
&#13;
// To interpret fractions (with '/') as numbers:
function evaluate(term) {
  // remove spaces and get numerator and denominator
  var arr = term.replace(/ /g, '').split('/');
  // get part before '/' and turn into number
  var val = +arr.shift();
  // read denominator(s) and perform division(s)
  while (arr.length) { 
    val = val / +arr.shift();
  }
  return val;
}

function submit() {
  var e = document.getElementById("topic");
  var ter = document.getElementById("term").value;
  var strUser = e.options[e.selectedIndex].value;
  var def;

  if (!strUser) {
    def = "Please specify what needs to be solved.";
  }
  else if (!term) {
    def = "Please specify the values used to calculate.";
  }
  else if (strUser == "a") {
    var arr = ter.split(",");
    var val1 = evaluate(arr[0]);
    var val2 = evaluate(arr[1]);

    if (arr.length !== 2) {
      def = "Error. Incorrect number of comma-separated values written; two expected.";
    }
    else if (isNaN(val1) || isNaN(val2)) {
      def = "Error. One or more values input is/are not a number.";
    }
    else {
      var step1 = Math.abs(val1 - val2);
      var step2 = val1 + val2;
      var step3 = step2 / 2;
      var step4 = step1 / step3;
      var final = Math.round(step4 * 100 * 100) / 100;
      def = final + "%";
    }
  }
  document.getElementById("textcom").value = def;
}
&#13;
<span>Please choose desired solution:</span>
<select id="topic">
  <option disabled selected value>------ Option ------</option>
  <option value="a" selected>Percent Difference</option>
</select>
<br>
<span>Values:</span>
<input type="text" id="term"></input>
<br>
<br>
<textarea readonly rows="3" cols="40" id="textcom">Uneditable. For output purposes only.</textarea>
<br>
<button onclick="submit()">Submit</button>
&#13;
&#13;
&#13;

注意:请注意,您可以在HTML中使用readonly属性 - 无需通过JavaScript设置此内容。