js怎么实现计算器的功能

JavaScript可以实现计算器的功能，通过基本的算术运算、事件监听、DOM操作等技术来实现。基本的算术运算包括加法、减法、乘法和除法；事件监听用于捕捉用户的操作；DOM操作用于更新显示结果。以下是详细步骤和代码示例。

一、HTML结构

首先，需要设计一个简单的HTML结构来表示计算器的界面。这个界面通常包括输入框和一系列按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <input type="text" class="calculator-screen" value="" disabled />
        <div class="calculator-keys">
            <button type="button" class="operator" value="+">+</button>
            <button type="button" class="operator" value="-">-</button>
            <button type="button" class="operator" value="*">&times;</button>
            <button type="button" class="operator" value="/">&divide;</button>
            <button type="button" value="7">7</button>
            <button type="button" value="8">8</button>
            <button type="button" value="9">9</button>
            <button type="button" value="4">4</button>
            <button type="button" value="5">5</button>
            <button type="button" value="6">6</button>
            <button type="button" value="1">1</button>
            <button type="button" value="2">2</button>
            <button type="button" value="3">3</button>
            <button type="button" value="0">0</button>
            <button type="button" class="decimal" value=".">.</button>
            <button type="button" class="all-clear" value="all-clear">AC</button>
            <button type="button" class="equal-sign operator" value="=">=</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

二、CSS样式

为了使计算器更美观，我们可以添加一些基本的CSS样式。

/* styles.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #f7f7f7;
    margin: 0;
}
.calculator {
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.calculator-screen {
    width: 100%;
    height: 60px;
    background: #222;
    color: #fff;
    border: none;
    text-align: right;
    padding: 0 10px;
    font-size: 2.5rem;
}
.calculator-keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
button {
    height: 60px;
    border: 1px solid #ccc;
    background: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}
button.operator {
    background: #f0ad4e;
    color: #fff;
}
button.equal-sign {
    background: #5cb85c;
    color: #fff;
    grid-column: span 4;
}
button.all-clear {
    background: #d9534f;
    color: #fff;
}

三、JavaScript实现

接下来，我们使用JavaScript来实现计算器的功能。首先定义一些变量来保存计算器的状态。

const calculator = {
    displayValue: '0',
    firstOperand: null,
    waitingForSecondOperand: false,
    operator: null,
};
function updateDisplay() {
    const display = document.querySelector('.calculator-screen');
    display.value = calculator.displayValue;
}
updateDisplay();
const keys = document.querySelector('.calculator-keys');
keys.addEventListener('click', (event) => {
    const { target } = event;
    const { value } = target;
    if (!target.matches('button')) {
        return;
    }
    switch (value) {
        case '+':
        case '-':
        case '*':
        case '/':
        case '=':
            handleOperator(value);
            break;
        case '.':
            inputDecimal(value);
            break;
        case 'all-clear':
            resetCalculator();
            break;
        default:
            if (Number.isInteger(parseFloat(value))) {
                inputDigit(value);
            }
    }
    updateDisplay();
});
function inputDigit(digit) {
    const { displayValue, waitingForSecondOperand } = calculator;
    if (waitingForSecondOperand === true) {
        calculator.displayValue = digit;
        calculator.waitingForSecondOperand = false;
    } else {
        calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
    }
}
function inputDecimal(dot) {
    if (calculator.waitingForSecondOperand === true) {
        calculator.displayValue = '0.';
        calculator.waitingForSecondOperand = false;
        return;
    }
    if (!calculator.displayValue.includes(dot)) {
        calculator.displayValue += dot;
    }
}
function handleOperator(nextOperator) {
    const { firstOperand, displayValue, operator } = calculator;
    const inputValue = parseFloat(displayValue);
    if (operator && calculator.waitingForSecondOperand)  {
        calculator.operator = nextOperator;
        return;
    }
    if (firstOperand == null && !isNaN(inputValue)) {
        calculator.firstOperand = inputValue;
    } else if (operator) {
        const result = performCalculation[operator](firstOperand, inputValue);
        calculator.displayValue = String(result);
        calculator.firstOperand = result;
    }
    calculator.waitingForSecondOperand = true;
    calculator.operator = nextOperator;
}
const performCalculation = {
    '/': (firstOperand, secondOperand) => firstOperand / secondOperand,
    '*': (firstOperand, secondOperand) => firstOperand * secondOperand,
    '+': (firstOperand, secondOperand) => firstOperand + secondOperand,
    '-': (firstOperand, secondOperand) => firstOperand - secondOperand,
    '=': (firstOperand, secondOperand) => secondOperand
};
function resetCalculator() {
    calculator.displayValue = '0';
    calculator.firstOperand = null;
    calculator.waitingForSecondOperand = false;
    calculator.operator = null;
}

四、功能解释

1、输入数字

当用户点击数字按钮时，inputDigit函数会被调用，更新显示值。如果当前显示值为'0'，则将其替换为新输入的数字；否则，将新输入的数字追加到现有的显示值后面。

2、输入小数点

inputDecimal函数确保在当前显示值中只允许输入一个小数点。如果已经输入了一个小数点，则忽略后续的小数点输入。

3、处理操作符

handleOperator函数负责处理四个基本算术操作（加、减、乘、除）和等号操作。当用户输入操作符时，函数会检查是否已经存在第一个操作数和操作符，并根据情况执行相应的计算。

4、执行计算

在performCalculation对象中定义了四个基本算术操作。每个操作对应一个函数，接收两个操作数并返回计算结果。

5、重置计算器

resetCalculator函数用于重置计算器的状态和显示值，通常与“AC”按钮绑定。

五、总结

通过上述步骤，我们实现了一个基本的JavaScript计算器。通过DOM操作、事件监听等技术，我们能够捕捉用户的输入并动态更新计算器的显示值。这个计算器虽然简单，但已经涵盖了基本的算术运算和一些基本的交互功能。进一步的改进可以包括处理更复杂的数学运算、优化用户界面以及增加更多的功能。

js怎么实现计算器的 功能