怎么用js做网页计算器的步骤

要用JavaScript做一个网页计算器，有几个关键步骤：定义HTML结构、编写CSS样式、编写JavaScript逻辑。其中，编写JavaScript逻辑是最为关键的一步，因为它负责处理用户输入、执行计算并在界面上展示结果。下面我们将详细描述实现一个网页计算器的具体步骤。

一、定义HTML结构

首先，我们需要定义计算器的基本结构。在HTML中，我们将使用<div>、<button>和<input>等元素来创建计算器的界面。

<!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样式。

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f5f5f5;
    font-family: 'Roboto', sans-serif;
}
.calculator {
    border-radius: 5px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}
.calculator-screen {
    width: 100%;
    height: 80px;
    border: none;
    background-color: #252525;
    color: white;
    text-align: right;
    padding-right: 20px;
    padding-left: 10px;
    font-size: 2.5rem;
}
.calculator-keys button {
    height: 60px;
    border: 1px solid #eaeaea;
    background-color: white;
    font-size: 1.5rem;
    flex: 1 1 20%;
    cursor: pointer;
}
.calculator-keys {
    display: flex;
    flex-wrap: wrap;
}
.calculator-keys button.operator {
    background-color: #ff9500;
    color: white;
}
.calculator-keys button.all-clear {
    background-color: #ff3b30;
    color: white;
    flex: 2 1 40%;
}
.calculator-keys button.equal-sign {
    background-color: #4cd964;
    color: white;
    flex: 2 1 40%;
}

三、编写JavaScript逻辑

最后一步，也是最重要的一步：编写JavaScript代码，实现计算器的功能。

const calculator = {
    displayValue: '0',
    firstOperand: null,
    waitingForSecondOperand: false,
    operator: null,
};
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) 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 = calculate(firstOperand, inputValue, operator);
        calculator.displayValue = `${parseFloat(result.toFixed(7))}`;
        calculator.firstOperand = result;
    }
    calculator.waitingForSecondOperand = true;
    calculator.operator = nextOperator;
}
function calculate(firstOperand, secondOperand, operator) {
    if (operator === '+') {
        return firstOperand + secondOperand;
    } else if (operator === '-') {
        return firstOperand - secondOperand;
    } else if (operator === '*') {
        return firstOperand * secondOperand;
    } else if (operator === '/') {
        return firstOperand / secondOperand;
    }
    return secondOperand;
}
function resetCalculator() {
    calculator.displayValue = '0';
    calculator.firstOperand = null;
    calculator.waitingForSecondOperand = false;
    calculator.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;
    if (!target.matches('button')) {
        return;
    }
    if (target.classList.contains('operator')) {
        handleOperator(target.value);
        updateDisplay();
        return;
    }
    if (target.classList.contains('decimal')) {
        inputDecimal(target.value);
        updateDisplay();
        return;
    }
    if (target.classList.contains('all-clear')) {
        resetCalculator();
        updateDisplay();
        return;
    }
    inputDigit(target.value);
    updateDisplay();
});

四、关键步骤详细解释

1、HTML结构

计算器的HTML结构主要由一个输入框和若干按钮组成。输入框用于显示计算结果和用户输入的数字，而按钮则用来输入数字、操作符和控制计算器。

2、CSS样式

CSS样式主要用来美化计算器的界面，使其看起来更加友好和易于使用。例如，通过设置按钮的大小、颜色和布局，使用户能够方便地点击和输入。

3、JavaScript逻辑

JavaScript逻辑是计算器的核心，它实现了以下主要功能：

输入数字和小数点：通过inputDigit和inputDecimal函数处理用户输入的数字和小数点，并更新显示值。
处理操作符：通过handleOperator函数处理用户输入的操作符，并执行相应的计算。
执行计算：通过calculate函数执行加法、减法、乘法和除法等基本运算。
重置计算器：通过resetCalculator函数重置计算器的状态，使其回到初始状态。
更新显示：通过updateDisplay函数更新显示值，使用户能够看到最新的计算结果和输入值。

通过以上步骤，我们可以实现一个简单但功能齐全的网页计算器。这个计算器可以处理基本的四则运算，并支持小数点和重置功能。