堆栈内存溢出
  简体   繁体   English

计算器的小数问题

[英]Decimal issue with calculator

 原文  2017-10-11 05:30:56  0   5    javascript

问题描述

My calculator can't keep long decimals within the output screen (ie 1/3). 我的计算器不能在输出屏幕中保留长的小数点（即1/3）。 I have tried to convert result into a number using parseFloat then use Math. 我试图使用parseFloat将结果转换为数字，然后使用Math。 round, then toString to convert back the result into string and display it on the screen, but it did not work. 回合，然后toString将结果转换回字符串并显示在屏幕上，但是没有用。 Please help!!! 请帮忙！！！ 

 $(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>

5 个解决方案

解决方案1
 0  2017-10-11 05:37:24

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

Try to use toFixed(n) . 尝试使用toFixed(n) 。

You can slice your result number. 您可以分割结果编号。

解决方案2
 0  2017-10-11 05:39:23

  • If it's about the display - change the div containing the output number (the "total") to have CSS style of "overflow:hidden" 如果是关于显示的-更改包含输出编号（“总计”）的div，使其CSS样式为“ overflow：hidden”

  • If it's about the way you handle numbers, you can round these numbers a bit. 如果是关于数字的处理方式，则可以对这些数字进行四舍五入。 On Calculla we use simple approach: if you want numbers to be no longer than let's say 2 ciphers after comma (like 10.33 instead of unlimited 333333....) then to this: 在Calculla上，我们使用简单的方法：如果您希望数字不超过逗号后的2个密码（例如10.33，而不是无限制的333333 ....），请执行以下操作：

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

    It's not a perfect solution, but it's simple and generally works. 这不是一个完美的解决方案，但它很简单并且可以正常使用。 This is a bit different in results from simply using "toFixed(2)", but I'll leave it to you to discover how. 结果与仅使用“ toFixed（2）”有所不同，但是我将留给您了解如何使用。

解决方案3
 0 已采纳  2017-10-11 05:39:54

You can use toFixed to limit the number of digits after the decimal point. 您可以使用toFixed来限制小数点后的位数。 So 0.333333333333333 with toFixed(2) will return 0.33 . 因此具有toFixed(2) 0.333333333333333将返回0.33 。

In addition to that you need to account for the digits before the decimal. 除此之外，您需要考虑小数点前的数字。 So you need to calculate the digits before the decimal point, and ensure that the length of the entire number does not exceed 9 digits. 因此，您需要计算小数点前的数字，并确保整数的长度不超过9位数字。 It can be done like so: 可以这样完成： 

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

Here's the updated pen: https://codepen.io/anon/pen/JrZKxd?editors=0010 这是更新的笔： https : //codepen.io/anon/pen/JrZKxd?editors=0010

解决方案4
 0  2017-10-11 05:42:01

try toFixed() method for that 尝试为此的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>

解决方案5
 0  2017-10-11 05:42:58

A CSS Only Solution 仅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.

相关问题 十进制到分数计算器 Javascript 问题 - Decimal to Fraction Calculator Javascript Issue JavaScript 计算器中只有 1 位小数？ - Only 1 decimal in a JavaScript calculator? 将十进制加到计算器 - Adding Decimal to calculator 十进制到二进制计算器 - Decimal to Binary Calculator 计算器正则表达式十进制 - Calculator Regex Decimal Javascript二进制到十进制计算器 - Javascript Binary to Decimal Calculator 使用按钮输入小数（计算器 - Inputting a decimal using a button(Calculator GPA计算器数学问题 - GPA Calculator Math Issue 计算器中的Javascript乘法问题 - Javascript Multiplication issue in Calculator 将 num 添加到计算器的问题 - Issue with adding num to calculator
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM