计算器的十进制问题

时间：2017-10-11 05:30:56

标签： javascript

我的计算器不能在输出屏幕内保留长小数（即1/3）。我尝试使用parseFloat将结果转换为数字，然后使用Math。舍入，然后toString将结果转换回字符串并将其显示在屏幕上，但它不起作用。请帮忙！！！

＆＃13;
＆＃13; 
$(document).ready(function() {
  var testNumLength = function(number) {
    if (number.length > 9) {
      totaldiv.text(number.substr(number.length - 9, 9));
      if (number.length > 15) {
        number = "";
        totaldiv.text("Err");
      }
    }
  };
  var entry = "";
  var current = ""; //after operator is entered
  var operator = "";
  var res = "";
  var totaldiv = $("#total");
  totaldiv.text("0");

  $("#numbers a").not("#clear,#clearall").click(function() {
    entry += $(this).text(); //take the text of the numbers when clicked and append it to var entry
    //display input1 on screen
    totaldiv.html(entry);
    testNumLength(entry);
  })

  $("#clear,#clearall").click(function() {
    entry = "";
    if ($(this).attr("id") === "clearall") {
      current = "";
    }
    totaldiv.text("0");

  })

  $("#operators a").click(function() {
    //append operators to var operator
    operator = $(this).text();

    current = entry;
    entry = "";


  })

  $("#decimal").click(function() {
    //var numOfDecs = 0;
    for (var i = 0; i < entry.length; i++) {

      if (entry.indexOf(".") == -1) {
        entry += ".";
        // numOfDecs += 1;
      }
    }
    totaldiv.text(entry);
    testNumLength(entry);
  })

  $("#equals").click(function() {
    var result = eval(current + operator + entry);
    entry = result;
    testNumLength(result);
    totaldiv.html(result);


  })

})
＆＃13; 
body,
div,
a {
  padding: 0;
  margin: 0;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#calculator {
  width: 310px;
  height: 460px;
  margin: 10px auto;
  padding: 5px;
  background-color: maroon;
  border-radius: 10px;
  border: 3px solid black;
}

#total {
  height: 70px;
  width: 300px;
  margin: 0;
  margin-bottom: 5px;
  padding: 0 5px;
  background-color: #FFF;
  text-align: right;
  font-size: 60px;
}

#numbers,
#operators {
  margin: auto;
}

a {
  cursor: pointer;
}

#operators a {
  display: block;
  width: 46px;
  height: 45px;
  float: left;
  padding: 2px;
  margin: 5px;
  text-align: center;
  text-decoration: none;
  color: black;
  font-size: 39px;
  background: -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#DCDCDC));
  background: -moz-linear-gradient(top, #EDEDED, #DCDCDC);
  border-radius: 10px;
}

#numbers a {
  display: block;
  float: left;
  color: black;
  font-size: 43px;
  text-decoration: none;
  width: 50px;
  height: 50px;
  padding: 10px;
  margin: 5px;
  background: -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#DCDCDC));
  background: -moz-linear-gradient(top, #EDEDED, #DCDCDC);
  border-radius: 10px;
}

#side {
  width: 49px;
  float: right;
}

#side a {
  border-radius: 10px;
  text-align: center;
  width: 40px;
  height: 40px;
  float: right;
  font-size: 32px;
  padding: 10px;
  margin: 5px;
  background: -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#DCDCDC));
  background: -moz-linear-gradient(top, #EDEDED, #DCDCDC);
}

a#equals {
  padding-top: 50px;
  height: 100px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="calculator">
    <div id="total">
    </div>
    <div id="operators">
      <a id="plus">+</a>
      <a id="minus">-</a>
      <a id="divide">/</a>
      <a id="times">*</a>

    </div>
    <div id="side">
      <a id="sq">^</a>
      <a id="sqrt">√</a>
      <a id="decimal">.</a>
      <a id="equals">=</a>
    </div>

    <div id="numbers">
      <a id="clear">C</a>
      <a id="clearall">AC</a>
      <a id=>1</a>
      <a>2</a>
      <a>3</a>
      <a>4</a>
      <a>5</a>
      <a>6</a>
      <a>7</a>
      <a>8</a>
      <a>9</a>
      <a>0</a>

    </div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

5 个答案:

答案 0 :(得分：0)

totaldiv.html(result.toFixed(6));

尝试使用toFixed(n)。

您可以对结果编号进行切片。

答案 1 :(得分：0)

  • 如果是关于显示 - 将包含输出编号的div（“total”）更改为CSS样式为“overflow：hidden”

  • 如果是关于处理数字的方式，可以稍微舍一些这些数字。在Calculla上我们使用简单的方法：如果你想要数字不要超过逗号后的2个密码（比如10.33而不是无限制的333333 ....）那么就这样：

    let outNumber = Math.round（inNumber * 100）/ 100;

    这不是一个完美的解决方案，但它很简单，通常有效。 简单地使用“toFixed（2）”的结果有点不同，但我会留给你发现如何。

答案 2 :(得分：0)

您可以使用toFixed来限制小数点后的位数。因此0.333333333333333与toFixed(2)将返回0.33。

除此之外，您还需要考虑小数点前的数字。因此，您需要计算小数点前的数字，并确保整数的长度不超过9位。可以这样做：

var integerPortionLength = result.toFixed(0).length;
totaldiv.html(result.toFixed(9 - integerPortionLength));

这是更新过的笔：https://codepen.io/anon/pen/JrZKxd?editors=0010

答案 3 :(得分：0)

尝试toFixed()方法

totaldiv.html(result.toFixed(2));

＆＃13;
＆＃13; 
$(document).ready(function() {
  var testNumLength = function(number) {
    if (number.length > 9) {
      totaldiv.text(number.substr(number.length - 9, 9));
      if (number.length > 15) {
        number = "";
        totaldiv.text("Err");
      }
    }
  };
  var entry = "";
  var current = ""; //after operator is entered
  var operator = "";
  var res = "";
  var totaldiv = $("#total");
  totaldiv.text("0");

  $("#numbers a").not("#clear,#clearall").click(function() {
    entry += $(this).text(); //take the text of the numbers when clicked and append it to var entry
    //display input1 on screen
    totaldiv.html(entry);
    testNumLength(entry);
  })

  $("#clear,#clearall").click(function() {
    entry = "";
    if ($(this).attr("id") === "clearall") {
      current = "";
    }
    totaldiv.text("0");

  })

  $("#operators a").click(function() {
    //append operators to var operator
    operator = $(this).text();

    current = entry;
    entry = "";


  })

  $("#decimal").click(function() {
    //var numOfDecs = 0;
    for (var i = 0; i < entry.length; i++) {

      if (entry.indexOf(".") == -1) {
        entry += ".";
        // numOfDecs += 1;
      }
    }
    totaldiv.text(entry);
    testNumLength(entry);
  })

  $("#equals").click(function() {
    var result = eval(current + operator + entry);
    entry = result;
    testNumLength(result);
    totaldiv.html(result.toFixed(2));


  })

})
＆＃13; 
body,
div,
a {
  padding: 0;
  margin: 0;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#calculator {
  width: 310px;
  height: 460px;
  margin: 10px auto;
  padding: 5px;
  background-color: maroon;
  border-radius: 10px;
  border: 3px solid black;
}

#total {
  height: 70px;
  width: 300px;
  margin: 0;
  margin-bottom: 5px;
  padding: 0 5px;
  background-color: #FFF;
  text-align: right;
  font-size: 60px;
}

#numbers,
#operators {
  margin: auto;
}

a {
  cursor: pointer;
}

#operators a {
  display: block;
  width: 46px;
  height: 45px;
  float: left;
  padding: 2px;
  margin: 5px;
  text-align: center;
  text-decoration: none;
  color: black;
  font-size: 39px;
  background: -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#DCDCDC));
  background: -moz-linear-gradient(top, #EDEDED, #DCDCDC);
  border-radius: 10px;
}

#numbers a {
  display: block;
  float: left;
  color: black;
  font-size: 43px;
  text-decoration: none;
  width: 50px;
  height: 50px;
  padding: 10px;
  margin: 5px;
  background: -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#DCDCDC));
  background: -moz-linear-gradient(top, #EDEDED, #DCDCDC);
  border-radius: 10px;
}

#side {
  width: 49px;
  float: right;
}

#side a {
  border-radius: 10px;
  text-align: center;
  width: 40px;
  height: 40px;
  float: right;
  font-size: 32px;
  padding: 10px;
  margin: 5px;
  background: -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#DCDCDC));
  background: -moz-linear-gradient(top, #EDEDED, #DCDCDC);
}

a#equals {
  padding-top: 50px;
  height: 100px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="calculator">
    <div id="total">
    </div>
    <div id="operators">
      <a id="plus">+</a>
      <a id="minus">-</a>
      <a id="divide">/</a>
      <a id="times">*</a>

    </div>
    <div id="side">
      <a id="sq">^</a>
      <a id="sqrt">√</a>
      <a id="decimal">.</a>
      <a id="equals">=</a>
    </div>

    <div id="numbers">
      <a id="clear">C</a>
      <a id="clearall">AC</a>
      <a id=>1</a>
      <a>2</a>
      <a>3</a>
      <a>4</a>
      <a>5</a>
      <a>6</a>
      <a>7</a>
      <a>8</a>
      <a>9</a>
      <a>0</a>

    </div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

仅限CSS解决方案

  #total {
      ....
      overflow: hidden;
      text-overflow: ellipsis;
  }

＆＃13;
＆＃13; 
$(document).ready(function() {
  var testNumLength = function(number) {
    if (number.length > 9) {
      totaldiv.text(number.substr(number.length - 9, 9));
      if (number.length > 15) {
        number = "";
        totaldiv.text("Err");
      }
    }
  };
  var entry = "";
  var current = ""; //after operator is entered
  var operator = "";
  var res = "";
  var totaldiv = $("#total");
  totaldiv.text("0");

  $("#numbers a").not("#clear,#clearall").click(function() {
    entry += $(this).text(); //take the text of the numbers when clicked and append it to var entry
    //display input1 on screen
    totaldiv.html(entry);
    testNumLength(entry);
  })

  $("#clear,#clearall").click(function() {
    entry = "";
    if ($(this).attr("id") === "clearall") {
      current = "";
    }
    totaldiv.text("0");

  })

  $("#operators a").click(function() {
    //append operators to var operator
    operator = $(this).text();

    current = entry;
    entry = "";


  })

  $("#decimal").click(function() {
    //var numOfDecs = 0;
    for (var i = 0; i < entry.length; i++) {

      if (entry.indexOf(".") == -1) {
        entry += ".";
        // numOfDecs += 1;
      }
    }
    totaldiv.text(entry);
    testNumLength(entry);
  })

  $("#equals").click(function() {
    var result = eval(current + operator + entry);
    entry = result;
    testNumLength(result);
    totaldiv.html(result);


  })

})
＆＃13; 
body,
div,
a {
  padding: 0;
  margin: 0;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#calculator {
  width: 310px;
  height: 460px;
  margin: 10px auto;
  padding: 5px;
  background-color: maroon;
  border-radius: 10px;
  border: 3px solid black;
}

#total {
  height: 70px;
  width: 300px;
  margin: 0;
  margin-bottom: 5px;
  padding: 0 5px;
  background-color: #FFF;
  text-align: right;
  font-size: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#numbers,
#operators {
  margin: auto;
}

a {
  cursor: pointer;
}

#operators a {
  display: block;
  width: 46px;
  height: 45px;
  float: left;
  padding: 2px;
  margin: 5px;
  text-align: center;
  text-decoration: none;
  color: black;
  font-size: 39px;
  background: -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#DCDCDC));
  background: -moz-linear-gradient(top, #EDEDED, #DCDCDC);
  border-radius: 10px;
}

#numbers a {
  display: block;
  float: left;
  color: black;
  font-size: 43px;
  text-decoration: none;
  width: 50px;
  height: 50px;
  padding: 10px;
  margin: 5px;
  background: -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#DCDCDC));
  background: -moz-linear-gradient(top, #EDEDED, #DCDCDC);
  border-radius: 10px;
}

#side {
  width: 49px;
  float: right;
}

#side a {
  border-radius: 10px;
  text-align: center;
  width: 40px;
  height: 40px;
  float: right;
  font-size: 32px;
  padding: 10px;
  margin: 5px;
  background: -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#DCDCDC));
  background: -moz-linear-gradient(top, #EDEDED, #DCDCDC);
}

a#equals {
  padding-top: 50px;
  height: 100px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="calculator">
    <div id="total">
    </div>
    <div id="operators">
      <a id="plus">+</a>
      <a id="minus">-</a>
      <a id="divide">/</a>
      <a id="times">*</a>

    </div>
    <div id="side">
      <a id="sq">^</a>
      <a id="sqrt">√</a>
      <a id="decimal">.</a>
      <a id="equals">=</a>
    </div>

    <div id="numbers">
      <a id="clear">C</a>
      <a id="clearall">AC</a>
      <a id=>1</a>
      <a>2</a>
      <a>3</a>
      <a>4</a>
      <a>5</a>
      <a>6</a>
      <a>7</a>
      <a>8</a>
      <a>9</a>
      <a>0</a>

    </div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题