javascript - 计算两位小数 | JavaScript 计算器-6ren

javascript - 计算两位小数 | JavaScript 计算器

转载作者：行者123 更新时间：2023-12-01 16:16:17

我正在用 javascript 制作一个计算器，但在执行带有两位小数的运算时我遇到了一个小问题。问题是我不能在另一个十进制数之后插入另一个十进制数:

我想在数学运算符号之后添加另一个十进制数，如下所示:

1 :这是我的代码:

function calcular(tipo, valor) {

  //.           TIPOS              

  //. TIPO AÇÃO    
  if (tipo === 'acao') {

    //; AÇÃO DE VALOR C  (LIMPAR O VISOR)  
    if (valor === 'c') {
      document.getElementById('resultado').value = ''
    }

    //; AÇÕES DE VALOR  + | - | * | /  CONTATENAR  
    if (valor === '+' || valor === '-' || valor === '*' || valor === '/') {
      document.getElementById('resultado').value += valor
    }


    if (valor === '=') {
      var valorCampo = eval(document.getElementById('resultado').value)
      document.getElementById('resultado').value = valorCampo
    }



    if (valor === '.') {
      var conteudo = document.getElementById('resultado').value
      conteudo.includes('.') ? document.getElementById('resultado').value : document.getElementById('resultado').value += valor

    }



    if (valor === '\b') {
      document.getElementById('resultado').value = document.getElementById('resultado').value.substring(0, document.getElementById('resultado').value.length - 1)



    }








    //. TIPO VALOR    
  } else if (tipo === 'valor') {
    //; CONTATENAÇÃO DOS VALORES 
    document.getElementById('resultado').value += valor

  }




}

.calculadora {
  margin-top: 40px;
  border: solid 1px #000;
  padding: 20px;
  background-color: #2E2E2E;
  border-radius: 10px;
  box-shadow: 1px 1px 5px #000;
}

.btn {
  width: 60px;
  height: 50px;
  margin: 5px;
  box-shadow: 1px 1px 1px #000;
}

.clear {
  width: 60px;
}

.enter {
  height: 110px;
}

.zero {
  width: 130px;
}

.resultado {
  text-align: right;
  font-size: 20px;
  margin-top: 10px;
  margin-bottom: 20px;
  border: solid 1px #000;
  box-shadow: 1px 1px 1px #000;
}

<html>

<head>
  <title>Calculadora</title>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

     <script src="https://kit.fontawesome.com/0c183dd402.js" crossorigin="anonymous"></script>



</head>

<body style="background: #D9D9D9">

  <div class="container">
    <div class="row">
      <div class="col d-flex justify-content-center">
        <br />

        <div class="calculadora">
          <input id="resultado" type="text" class="form-control resultado" placeholder="0" disabled="disabled" />

          <div class="row">

            <button onclick="calcular('acao', '*')" type="button" class="btn btn-dark btn-lg font-weight-light">x</button>
            <button onclick="calcular('acao', '/')" type="button" class="btn btn-dark btn-lg font-weight-light">/</button>
            <button onclick="calcular('acao', 'c')" type="button" class="btn btn-dark btn-lg clear font-weight-light">C</button>
            <button onclick="calcular('acao', '\b')" type="button" class="btn btn-dark btn-lg font-weight-light"><i class="fas fa-backspace"></i></button>

          </div>

          <div class="row">
            <button onclick="calcular('valor', 7)" type="button" class="btn btn-dark btn-lg font-weight-light">7</button>
            <button onclick="calcular('valor', 8)" type="button" class="btn btn-dark btn-lg font-weight-light">8</button>
            <button onclick="calcular('valor', 9)" type="button" class="btn btn-dark btn-lg font-weight-light">9</button>
            <button onclick="calcular('acao', '-')" type="button" class="btn btn-dark btn-lg font-weight-light">-</button>
          </div>

          <div class="row">
            <button onclick="calcular('valor', 4)" type="button" class="btn btn-dark btn-lg font-weight-light">4</button>
            <button onclick="calcular('valor', 5)" type="button" class="btn btn-dark btn-lg font-weight-light">5</button>
            <button onclick="calcular('valor', 6)" type="button" class="btn btn-dark btn-lg font-weight-light">6</button>
            <button onclick="calcular('acao', '+')" type="button" class="btn btn-dark btn-lg font-weight-light">+</button>
          </div>

          <div class="row">
            <button onclick="calcular('valor', 1)" type="button" class="btn btn-dark btn-lg font-weight-light">1</button>
            <button onclick="calcular('valor', 2)" type="button" class="btn btn-dark btn-lg font-weight-light">2</button>
            <button onclick="calcular('valor', 3)" type="button" class="btn btn-dark btn-lg font-weight-light">3</button>
            <button onclick="calcular('acao', '=')" type="button" class="btn btn-dark btn-lg enter">=</button>
          </div>

          <div class="row" style="margin-top: -60px">
            <button onclick="calcular('valor', 0)" type="button" class="btn btn-dark zero btn-lg font-weight-light">0</button>
            <button onclick="calcular('acao', '.')" type="button" class="btn btn-dark btn-lg font-weight-light">.</button>
          </div>

        </div>
      </div>
    </div>
  </div>

  
</body>

</html>

最佳答案

改变这个:

<button onclick="calcular('acao', '.')" type="button" class="btn btn-dark btn-lg font-weight-light">.</button>

对此:

<button onclick="calcular('valor', '.')" type="button" class="btn btn-dark btn-lg font-weight-light">.</button>

所有更改的是 'acao' 到 'valor'。

function calcular(tipo, valor) {

  //.           TIPOS              

  //. TIPO AÇÃO    
  if (tipo === 'acao') {

    //; AÇÃO DE VALOR C  (LIMPAR O VISOR)  
    if (valor === 'c') {
      document.getElementById('resultado').value = ''
    }

    //; AÇÕES DE VALOR  + | - | * | /  CONTATENAR  
    if (valor === '+' || valor === '-' || valor === '*' || valor === '/') {
      document.getElementById('resultado').value += valor
    }


    if (valor === '=') {
      var valorCampo = eval(document.getElementById('resultado').value)
      document.getElementById('resultado').value = valorCampo
    }



    if (valor === '.') {
      var conteudo = document.getElementById('resultado').value
      conteudo.includes('.') ? document.getElementById('resultado').value : document.getElementById('resultado').value += valor

    }



    if (valor === '\b') {
      document.getElementById('resultado').value = document.getElementById('resultado').value.substring(0, document.getElementById('resultado').value.length - 1)



    }








    //. TIPO VALOR    
  } else if (tipo === 'valor') {
    //; CONTATENAÇÃO DOS VALORES 
    document.getElementById('resultado').value += valor

  }




}

.calculadora {
  margin-top: 40px;
  border: solid 1px #000;
  padding: 20px;
  background-color: #2E2E2E;
  border-radius: 10px;
  box-shadow: 1px 1px 5px #000;
}

.btn {
  width: 60px;
  height: 50px;
  margin: 5px;
  box-shadow: 1px 1px 1px #000;
}

.clear {
  width: 60px;
}

.enter {
  height: 110px;
}

.zero {
  width: 130px;
}

.resultado {
  text-align: right;
  font-size: 20px;
  margin-top: 10px;
  margin-bottom: 20px;
  border: solid 1px #000;
  box-shadow: 1px 1px 1px #000;
}

<html>

<head>
  <title>Calculadora</title>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

     <script src="https://kit.fontawesome.com/0c183dd402.js" crossorigin="anonymous"></script>



</head>

<body style="background: #D9D9D9">

  <div class="container">
    <div class="row">
      <div class="col d-flex justify-content-center">
        <br />

        <div class="calculadora">
          <input id="resultado" type="text" class="form-control resultado" placeholder="0" disabled="disabled" />

          <div class="row">

            <button onclick="calcular('acao', '*')" type="button" class="btn btn-dark btn-lg font-weight-light">x</button>
            <button onclick="calcular('acao', '/')" type="button" class="btn btn-dark btn-lg font-weight-light">/</button>
            <button onclick="calcular('acao', 'c')" type="button" class="btn btn-dark btn-lg clear font-weight-light">C</button>
            <button onclick="calcular('acao', '\b')" type="button" class="btn btn-dark btn-lg font-weight-light"><i class="fas fa-backspace"></i></button>

          </div>

          <div class="row">
            <button onclick="calcular('valor', 7)" type="button" class="btn btn-dark btn-lg font-weight-light">7</button>
            <button onclick="calcular('valor', 8)" type="button" class="btn btn-dark btn-lg font-weight-light">8</button>
            <button onclick="calcular('valor', 9)" type="button" class="btn btn-dark btn-lg font-weight-light">9</button>
            <button onclick="calcular('acao', '-')" type="button" class="btn btn-dark btn-lg font-weight-light">-</button>
          </div>

          <div class="row">
            <button onclick="calcular('valor', 4)" type="button" class="btn btn-dark btn-lg font-weight-light">4</button>
            <button onclick="calcular('valor', 5)" type="button" class="btn btn-dark btn-lg font-weight-light">5</button>
            <button onclick="calcular('valor', 6)" type="button" class="btn btn-dark btn-lg font-weight-light">6</button>
            <button onclick="calcular('acao', '+')" type="button" class="btn btn-dark btn-lg font-weight-light">+</button>
          </div>

          <div class="row">
            <button onclick="calcular('valor', 1)" type="button" class="btn btn-dark btn-lg font-weight-light">1</button>
            <button onclick="calcular('valor', 2)" type="button" class="btn btn-dark btn-lg font-weight-light">2</button>
            <button onclick="calcular('valor', 3)" type="button" class="btn btn-dark btn-lg font-weight-light">3</button>
            <button onclick="calcular('acao', '=')" type="button" class="btn btn-dark btn-lg enter">=</button>
          </div>

          <div class="row" style="margin-top: -60px">
            <button onclick="calcular('valor', 0)" type="button" class="btn btn-dark zero btn-lg font-weight-light">0</button>
            <button onclick="calcular('valor', '.')" type="button" class="btn btn-dark btn-lg font-weight-light">.</button>
          </div>

        </div>
      </div>
    </div>
  </div>

  
</body>

</html>

关于javascript - 计算两位小数 | JavaScript 计算器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63800182/

文章推荐： sql-server - 1/1/1753 在 SQL Server 中有何意义？

文章推荐： javascript - 在 three.js THREE.Points 对象中按索引隐藏点

Javascript 小数
如何将整数类型转换为 double /浮点类型以显示小数点？例如，如果我想将数字转换为货币格式: 5 会变成 5.004.3 会变成 4.30 javascript 有什么东西可以用来做这种转换吗？
浮点数(小数)在计算机中如何用二进制存储？
【版权声明】未经博主同意，谢绝转载！（请尊重原创，博主保留追究权） https://www.cnblogs.com/cnb-yuchen/p/18107586 出自【进步*于辰的博客】
vba - 将存储为文本的数字转换为数字 - 小数
我意识到这是一个重复的问题，但是 this 中提到的解决方案这个问题完全不适合我。我目前的代码如下 Sub ConvertTextToNumber() Dim Area As Range, C As
Javascript 数学用逗号替换点/小数
我正在使用数学 javascript，但在用它来替换点的逗号和逗号的点时遇到了一些麻烦。我可以改变千位分隔符的逗号，但无法设法将小数点变成逗号。我尝试了其他帖子中的一些建议，但没有感到高兴。目标是实现
Android Numberpicker 小数
我正在尝试在 Android 中创建一个数字选择器，但轮子只增加 1。我想增加 0.1。我在网上查了一下，但我发现了一个格式化的浮点数组禁用了轮子。请帮助并为语法感到抱歉，我正在学习。最佳答案您可
python - 正则表达式捕获特定的百分比/小数
我正在尝试在多个网站上获取利率。数据相当非结构化，但形式足够接近。我想要捕捉的内容: x.xx% 至 xx.xx% 数据示例: 由 FDIC 成员 WebBank 发放的所有贷款。您的实际利率取决于信
MySQL:将德语字符串转换为浮点/小数
在 MySQL 表中，我有一个具有不同值的 VARCHAR 列，这些值可能代表字符串、整数、浮点、任意值。这些值作为特定于语言的字符串写入数据库，这意味着 123.45 的浮点值可以写为德语中的 "1
javascript - 正则表达式匹配字符串是否包含带有数字的整数/小数
我想编写一个正则表达式，它允许整数或具有 0 - 2 个小数位的小数。有效输入 1 1. 1.1 1.11 111111111 111111111. 111111111.1 111111111.11
javascript - 小数、逗号和客户端验证问题
我正在尝试为 nullable 实现客户端验证其小数点分隔符可以是逗号(例如:123,45)。在我看来: ... @Html.LabelFor(model => model.Turnove
php - 如何从还包含整数的字符串中仅提取 float (小数)
我找不到合适的正则表达式来仅从字符串中提取 float 。考虑以下字符串: $string = "8x2.1 3x2"; 我想提取 2.1，我尝试了以下操作，但这给了我整数和 float : preg
excel - 在excel中使用正则表达式从单位/字符串中提取第一个整数/小数
我希望使用正则表达式函数分离以下数据，如下所示: 要使用的功能: let fx=(text,regex)=> Web.Page( " var x='
javascript - 如何在我的代码中允许 "0."小数
我是 jquery 新手。我有一个带有两个输入框的表单。我实现了一些验证。 Min.Amount Max.Amount
java - 将最大的产品计数器初始化为 "infinitely"小数
我正在java中实现一个简单的算法，它接受一个整数数组，并查找并返回数组中相邻整数的最大乘积。为此，我首先初始化了一个名为largestProduct的变量，我用它来跟踪当前找到的最大(最佳)产品。
javascript - 如何 move 小数？
在 JavaScript 中，我想定义小数点的位置。我只能在示例中真正展示它。假设输入值为 1234 。我希望输出为 123.4 。或者，如果输入是 12345 ，我希望输出是 123.45 。
jquery - 只允许数字、小数、负数
我有这段代码，只允许在 keypress() 的输入字段中输入数字 if (e.which != 8 && e.which != 0 && (e.which 57)) { return fa
python - 小数(-1)是什么意思？
我目前正在开发一些基于 Django 的 Web 项目，在这个 Web 开发过程中，我遇到了以下我无法正确理解的代码。 if price_product['price'] == Decimal('-1
c++ - 无法打印更多的 pi 小数
这个问题在这里已经有了答案: How do I print a double value with full precision using cout? (17 个答案) 关闭 7 年前。我试图在
mysql - 添加两个表中的多个(小数)值以更新第三个表
这应该是微不足道的，但我正在兜圈子，也许有人可以提供帮助。我有两个表(T1，T2)，我希望从中提取每行中的多个值并更新第三个表(T3)的内容当且仅当)T1 中有两个 UQ，NN 字段，T2 匹配，在
javascript - 查找整数并附加 .00 小数
如果数字不是十进制，我需要附加.00，但是当我尝试下面的代码时，它会将整个数字更改为0.00。例如，如果数字是12,200，它会将其更改为0.00，而不是在末尾添加.00 $('.total-amou
ios - Swift:自动布局以编程方式导致错误的帧大小(小数)
我正在尝试在容器 View 中设置 9:16 纵横比 View 。以下代码在 viewDidLayoutSubviews 中设置约束，以便在正确的位置考虑自动布局。它还调用 layoutIfNeede

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 计算两位小数 | JavaScript 计算器