堆棧內存溢出
  簡體   English   中英

計算器的小數問題

[英]Decimal issue with calculator

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

問題描述

我的計算器不能在輸出屏幕中保留長的小數點（即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>

5 個解決方案

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

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

嘗試使用toFixed(n) 。

您可以分割結果編號。

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

  • 如果是關於顯示的-更改包含輸出編號（“總計”）的div，使其CSS樣式為“ overflow：hidden”

  • 如果是關於數字的處理方式，則可以對這些數字進行四舍五入。 在Calculla上，我們使用簡單的方法：如果您希望數字不超過逗號后的2個密碼（例如10.33，而不是無限制的333333 ....），請執行以下操作：

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

    這不是一個完美的解決方案，但它很簡單並且可以正常使用。 結果與僅使用“ toFixed（2）”有所不同，但是我將留給您了解如何使用。

解決方案3
 0 已采納  2017-10-11 05:39:54

您可以使用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

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

嘗試為此的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

僅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 問題 JavaScript 計算器中只有 1 位小數？ 將十進制加到計算器 十進制到二進制計算器 計算器正則表達式十進制 Javascript二進制到十進制計算器 使用按鈕輸入小數（計算器 GPA計算器數學問題 計算器中的Javascript乘法問題 將 num 添加到計算器的問題
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM