如何使用javascript在计算器中添加小数？

问题描述 投票：0回答：2

我需要有关计算器中小数按钮的帮助。它现在以某种方式工作，但我需要进一步完善它，但有点不知道如何。因此，如果您知道如何使其更好，请提供帮助。因此，如果您知道如何解决它，请这样做。谢谢你。

  1. 如何在打印输出中添加小数

  2. 问题是当我按数字并按小数后，它可以工作，例如 2.34，但问题是你可以在每个数字后按小数，例如 2.3.4，这不是我想要的。

这是一段 JavaScript 代码>>>>>>>>

function getHistory() {
  return document.getElementById("history-value").innerHTML;
}
function printHistory(num) {
  document.getElementById("history-value").innerHTML = num;
}
function getOutput() {
  return document.getElementById("output-value").innerHTML;
}
function printOutput(num) {
  if (num == "") {
    document.getElementById("output-value").innerHTML = num;
  } else {
    document.getElementById("output-value").innerHTML = getFormatNumber(num);
  }
}

function getFormatNumber(num) {
  if (num == "-") {
    return "";
  }
  if (num.length > 10) {
    num = num.substr(0, 10);
    alert("it tooo much!");
  }
  var n = Number(num);
  if (n === "Infinity") {
    value = "0";
    alert("Error");
  } else {
    var value = n.toLocaleString("en");
  }
  return value;
}

function reverseNumberFormat(num) {
  return Number(num.replace(/,/g, ""));
}

let operator = document.getElementsByClassName("operator");
for (let i = 0; i < operator.length; i++) {
  operator[i].addEventListener("click", function () {
    if (this.id == "clear") {
      printOutput("");
      printHistory("");
    } else if (this.id == "backspace") {
      let output = reverseNumberFormat(getOutput()).toString();
      if (output) {
        output = output.substr(0, output.length - 1);
        printOutput(output);
      }
    } else {
      let output = getOutput();
      let history = getHistory();
      if (output == "" && history != "") {
        if (isNaN(history[history.length - 1])) {
          history = history.substr(0, history.length - 1);
        }
      }
      if (output != "" || history != "") {
        output = output == "" ? output : reverseNumberFormat(output);
        history = history + output;
        if (this.id == "=") {
          let result = eval(history);
          printOutput(result);
          printHistory("");
        } else {
          history = history + this.id;
          printHistory(history);
          printOutput("");
        }
      }
    }
  });
}

let number = document.getElementsByClassName("number");
for (let i = 0; i < number.length; i++) {
  number[i].addEventListener("click", function () {
    let output = reverseNumberFormat(getOutput());
    if (output != NaN) {
      output += this.id;
      printOutput(output);
    }
  });
}

      <div id="calculator">
        <div id="result">
          <div id="history">
            <p id="history-value"></p>
          </div>
          <div id="output">
            <p id="output-value"></p>
          </div>
        </div>

        <div id="keyboard">
          <button class="operator" id="clear">C</button>
          <button class="operator" id="backspace">CE</button>
          <button class="operator" id="%">%</button>
          <button class="operator" id="/">&#247;</button>

          <button class="number" id="7">7</button>
          <button class="number" id="8">8</button>
          <button class="number" id="9">9</button>
          <button class="operator" id="*">&times;</button>

          <button class="number" id="4">4</button>
          <button class="number" id="5">5</button>
          <button class="number" id="6">6</button>
          <button class="operator" id="-">-</button>

          <button class="number" id="1">1</button>
          <button class="number" id="2">2</button>
          <button class="number" id="3">3</button>
          <button class="operator" id="+">+</button>

          <button class="number zero" id="0">0</button>
          <button class="operator" id=".">.</button>
          <button class="operator" id="=">=</button>
        </div>
      </div>
    </div>
javascript html css decimal
2个回答
1
投票

一些改变是必要的

第一（1）：将点

.
运算符类名更改为
number
，如下所示

<button class="number" id=".">.</button>

第二 (2)：在 

getFormatNumber
中将其替换为此更新。

function getFormatNumber(num) {
  if (num == "-") {
    return "";
  }
  if (num.length > 10) {
    num = num.substr(0, 10);
    alert("it tooo much!");
  }

  // to check whether a dot is placed just a the end of num like 6.
  let lastIndexOfDot  = num.toString().lastIndexOf(".") ; 
  let isDotted  =lastIndexOfDot  == false ? false: lastIndexOfDot == num.length-1 ? true : false ; 

  var n =  Number(num); 

  if (n === "Infinity") {
    value = "0";
    alert("Error");
  } else {
    var value = n.toLocaleString("en");
  }
   // if dotted is true then value has a dot at the end like : 5. so we return value  with its dot 
   if (isDotted ) return value +"." ; 

   return value;  // no dot at the end 
}

-第三 (3 ) 在属于 

handler
的所有元素的 
class number
中，将其替换为新的 
event handler

let number = document.getElementsByClassName("number");
for (let i = 0; i < number.length; i++) {
  number[i].addEventListener("click", function () {
    let output = reverseNumberFormat(getOutput());

    if (output != NaN ) {
      output += this.id;  
      // CHECK HERE IF output is already a valid decimal number 
      let matchCount = output.match(/\./g) ;
    
      if( matchCount && matchCount.length > 1 ) return  ; // => already decimal number 
      printOutput(output);
   }

 });
}


reverseNumberFormat
函数中的(4)中的四项替换为this

function reverseNumberFormat(num) {
  return num.replace(/,/g, "");  // => Nb: conversion not necessary
}

注意：这很有帮助，而且对我来说很有效，但如果将来有任何错误或问题，请随时通知我。

0
投票

我有同样的问题，已经在 css 和 html 中添加了“小数按钮”和其他内容，但不知道如何为“小数按钮”编写函数。

这些是Js代码；

let runningTotal =0;
let buffer ="0";
let previousOperator;

const screen= document.querySelector('.screen');

function buttonClick(value){
    if(isNaN(value)){
        handleSymbol(value);
    }else{
        handleNumber(value);
    }
    screen.innerText = buffer;
}

function handleSymbol(symbol){
    switch(symbol){
        case'C':
        buffer = '';
        runningTotal = 0;
        break;
        case '=':
            if(previousOperator === null){
                return
            }
            flushOperation(parseInt(buffer));
            previousOperator = null;
            buffer = runningTotal;
            runningTotal = 0;
            break;
        case '←':
            if(buffer.length ===1){
                buffer = '0';
            }else{
                buffer = buffer.substring(0, buffer.length - 1);
            }
            break;
        case '+':
        case '−':
        case '×':
        case '÷':
            handleMath(symbol);
            break;
    }
}      

function handleMath(symbol){
    if(buffer === '0'){
        return;
    }

    const intBuffer = parseInt(buffer);

    if(runningTotal === 0){
        runningTotal = intBuffer;
    }else{
        flushOperation(intBuffer);
    }
    previousOperator = symbol;
    buffer = '';
}

function flushOperation(intBuffer){
    if(previousOperator === '+'){
        runningTotal += intBuffer;
    }else if(previousOperator === '−'){
        runningTotal -= intBuffer;
    }else if(previousOperator === '×'){
        runningTotal *= intBuffer;
    }else if(previousOperator === '÷'){
        runningTotal /= intBuffer;
    }
}

function handleNumber(numberString){
    if(buffer === "0"){
        buffer = numberString;
    }else{
        buffer += numberString;
    }
}

function init(){
    document.querySelector('.calc-buttons').addEventListener('click', function(event){
        buttonClick(event.target.innerText);
    })
}

init();
html{
    box-sizing: border-box;
    height: 100%;
}

*,
*::before,
*::after{
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}


body{
align-items: center;
background-color: #FA8BFF;
background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
display: flex;
font-family:  'Dosis ExtraBold', sans-serif;
font-display: swap;
height: inherit;
justify-content: center;
}

.title{
    backdrop-filter: blur(5.5px);
    -webkit-backdrop-filter: blur(5.5px);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
    color: #232323;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.34);
    flex-basis: 400px;
    height: 90px;
    padding: 20px 35px;
    margin-top: 1% 9;
    margin-bottom: 4%;
}

.wrapper{
    backdrop-filter: blur(5.5px);
    -webkit-backdrop-filter: blur(5.5px);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
    color: #232323;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.34);
    flex-basis: 400px;
    height: 650px;
    padding: 20px 35px;
}

.screen{
    backdrop-filter: blur(5.5px);
    -webkit-backdrop-filter: blur(5.5px);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.01);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
    color: #232323;
    font-size: 35px;
    overflow: auto;
    padding: 20px;
    text-align: right;
    width: 350px;
    height: 100px;
}

.calc-button-row{
    display: flex;
    justify-content: space-between;
    margin: 5% 0;
}

.calc-button{
    backdrop-filter: blur(5.5px);
    -webkit-backdrop-filter: blur(5.5px);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.01);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
    color: #232323;
    flex-basis: 20%;
    font-family: inherit;
    font-size: 24px;
    height: 65px;

}

.calc-button:last-child{
    backdrop-filter: blur(5.5px);
    -webkit-backdrop-filter: blur(5.5px);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.01);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
    color: #fff;
    background: #434b75;
}

.calc-button:last-child:hover{
    background-color: #434b75;
    color: #fff;
}

.calc-button-row:hover{
    background-color: inherit;
}

.calc-button:active{
    background-color: #FA8BFF;
}

.double{
    flex-basis: 47%;
}

.triple{
    flex-basis: 73%;
}
.calc-button:last-child:active{
    background-color: #2BFF88;
}

.double{
    flex-basis: 47%;
}

.triple{
    flex-basis: 73%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Bemreq Calculator</title>
</head>

<body>
    
 <div class="wrapper">
    <div class="baslik"><h1 class="başlik">Bemreq Calculator</h1>
            <style>
                h1{
                    text-align: center;
                }
            </style>
        </div>
    
        <section class="screen"></section>

         <section class="calc-buttons">
            <div class="calc-button-row">
                <button class="calc-button double">
                    C
                </button>
                <button class="calc-button">
                    &larr;
                </button>
                <button class="calc-button">
                    &divide;
                </button>
            </div>

            <div class="calc-button-row">
                <button class="calc-button">
                    7
                </button>
                <button class="calc-button">
                    8
                </button>
                <button class="calc-button">
                    9
                </button>
                <button class="calc-button">
                    &times;
                </button>
            </div>

            <div class="calc-button-row">
                <button class="calc-button">
                    4
                </button>
                <button class="calc-button">
                    5
                </button>
                <button class="calc-button">
                    6
                </button>
                <button class="calc-button">
                    &minus;
                </button>
            </div>

            <div class="calc-button-row">
                <button class="calc-button">
                    1
                </button>
                <button class="calc-button">
                    2
                </button>
                <button class="calc-button">
                    3
                </button>
                <button class="calc-button">
                    &plus;
                </button>
            </div>

            <div class="calc-button-row">
                <button class="calc-button double">
                    0
                </button>
                <button class="calc-button">
                    ,
                </button>
                <button class="calc-button">
                    &equals;
                </button>
                
            </div>
            
        </section>

    </div>



    <script src="script.js"></script>
</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.