繁体   English   中英

计算器的小数问题

[英]Decimal issue with calculator

我的计算器不能在输出屏幕中保留长的小数点(即1/3)。 我试图使用parseFloat将结果转换为数字,然后使用Math。 回合,然后toString将结果转换回字符串并显示在屏幕上,但是没有用。 请帮忙!!!

 $(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); }) }) 
 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; } 
 <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> 

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

尝试使用toFixed(n)

您可以分割结果编号。

  • 如果是关于显示的-更改包含输出编号(“总计”)的div,使其CSS样式为“ overflow:hidden”
  • 如果是关于数字的处理方式,则可以对这些数字进行四舍五入。 在Calculla上,我们使用简单的方法:如果您希望数字不超过逗号后的2个密码(例如10.33,而不是无限制的333333 ....),请执行以下操作:

    let outNumber = Math.round(inNumber * 100)/ 100;

    这不是一个完美的解决方案,但它很简单并且可以正常使用。 结果与仅使用“ toFixed(2)”有所不同,但是我将留给您了解如何使用。

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

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

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

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

尝试为此的toFixed()方法

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

 $(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)); }) }) 
 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; } 
 <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> 

仅CSS解决方案

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

 $(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); }) }) 
 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; } 
 <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> 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM