计算两个十进制数 | JavaScript 计算器
[英]Calculate two decimal numbers | JavaScript Calculator
问题描述
我正在用 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>
1 个解决方案
解决方案1
2 2020-09-09 04:08:34
改变这个：
<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' '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计算器计算十进制数字？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.