js计算器怎么显示

使用JavaScript实现计算器显示的方法

要让JavaScript实现计算器显示，你需要掌握HTML、CSS和JavaScript三部分内容。首先，你需要在HTML中构建一个基本的计算器布局；其次，利用CSS为计算器添加样式，使其美观；最后，使用JavaScript实现计算器的功能。核心步骤包括：创建HTML结构、添加CSS样式、编写JavaScript逻辑。下面，我们将详细描述如何实现这些步骤。

一、创建HTML结构

首先，构建一个基本的HTML文件来定义计算器的结构。HTML负责展示计算器的界面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Calculator</title>
    <link rel="stylesheet" href="style.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" value="=">=</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

二、添加CSS样式

接下来，使用CSS为计算器添加样式，使其外观更加美观和实用。

body {
    font-family: 'Roboto', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}
.calculator {
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px #000000;
    background-color: #ffffff;
}
.calculator-screen {
    width: 100%;
    height: 40px;
    border: none;
    background-color: #252525;
    color: #ffffff;
    text-align: right;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 24px;
    border-radius: 5px;
    margin-bottom: 10px;
}
.calculator-keys button {
    height: 60px;
    width: 60px;
    margin: 5px;
    font-size: 24px;
    border-radius: 5px;
    border: none;
    background-color: #e0e0e0;
    cursor: pointer;
}
.calculator-keys button.operator {
    background-color: #ff9500;
    color: white;
}
.calculator-keys button.equal-sign {
    background-color: #007AFF;
    color: white;
    height: 130px;
}

三、编写JavaScript逻辑

最后，编写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 = 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;
}
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、添加高级运算功能

你可以通过添加更多的按钮和相应的JavaScript逻辑来扩展计算器的功能，例如添加平方根、幂运算等。

<button type="button" class="operator" value="sqrt">√</button>
<button type="button" class="operator" value="pow">^</button>

在JavaScript中添加相应的处理函数：

const performCalculation = {
    '/': (firstOperand, secondOperand) => firstOperand / secondOperand,
    '*': (firstOperand, secondOperand) => firstOperand * secondOperand,
    '+': (firstOperand, secondOperand) => firstOperand + secondOperand,
    '-': (firstOperand, secondOperand) => firstOperand - secondOperand,
    'sqrt': (firstOperand) => Math.sqrt(firstOperand),
    'pow': (firstOperand, secondOperand) => Math.pow(firstOperand, secondOperand),
    '=': (firstOperand, secondOperand) => secondOperand
};

2、提升用户体验

你可以通过添加键盘事件监听器，使用户可以通过键盘输入进行操作：

document.addEventListener('keydown', (event) => {
    const { key } = event;
    if (key >= 0 && key <= 9) {
        inputDigit(key);
        updateDisplay();
    } else if (key === '.') {
        inputDecimal(key);
        updateDisplay();
    } else if (key === '=' || key === 'Enter') {
        handleOperator('=');
        updateDisplay();
    } else if (key === 'Escape') {
        resetCalculator();
        updateDisplay();
    } else if (key === '+' || key === '-' || key === '*' || key === '/') {
        handleOperator(key);
        updateDisplay();
    }
});

通过这些步骤，你可以实现一个功能完备、用户体验良好的JavaScript计算器。通过不断优化和扩展功能，你可以使计算器更加适合特定的应用场景和用户需求。