js怎么做计算器页面

创建一个 JavaScript 计算器页面

在当今数字化时代，能够创建一个功能齐全的计算器页面是每个前端开发者的基本技能之一。设计简洁、功能全面、用户体验友好是创建优秀计算器页面的核心要素。本文将详细介绍如何使用JavaScript、HTML和CSS来实现一个计算器页面，并深入探讨每个步骤的细节。

一、设计简洁

计算器的设计应尽量简洁，以便用户可以轻松操作。要实现这一点，首先需要搭建HTML结构，确保每个元素都清晰可见，布局合理。

1、HTML结构

我们需要为计算器创建一个基本的HTML框架，包括显示屏和按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <div id="display" class="display">0</div>
        <div class="buttons">
            <button class="btn" data-value="7">7</button>
            <button class="btn" data-value="8">8</button>
            <button class="btn" data-value="9">9</button>
            <button class="btn" data-value="/">/</button>
            <button class="btn" data-value="4">4</button>
            <button class="btn" data-value="5">5</button>
            <button class="btn" data-value="6">6</button>
            <button class="btn" data-value="*">*</button>
            <button class="btn" data-value="1">1</button>
            <button class="btn" data-value="2">2</button>
            <button class="btn" data-value="3">3</button>
            <button class="btn" data-value="-">-</button>
            <button class="btn" data-value="0">0</button>
            <button class="btn" data-value=".">.</button>
            <button class="btn" data-value="C">C</button>
            <button class="btn" data-value="+">+</button>
            <button class="btn equal" data-value="=">=</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

2、CSS样式

为了让计算器看起来更加美观，我们需要添加一些基本的样式。

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
    font-family: Arial, sans-serif;
}
.calculator {
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}
.display {
    text-align: right;
    padding: 20px;
    font-size: 2em;
    border-bottom: 1px solid #ccc;
}
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.btn {
    padding: 20px;
    font-size: 1.5em;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    cursor: pointer;
}
.btn:hover {
    background-color: #e0e0e0;
}
.equal {
    grid-column: span 4;
    background-color: #4caf50;
    color: #fff;
}

通过以上步骤，我们已经创建了一个简洁的计算器界面。接下来，我们将详细介绍如何使用JavaScript实现计算器的功能。

二、功能全面

一个功能全面的计算器应该能够执行基本的算术运算（加、减、乘、除）并具有清除功能。以下是实现这些功能的JavaScript代码。

1、基本运算功能

我们需要为每个按钮添加点击事件，并在点击时更新显示屏的内容。

document.addEventListener('DOMContentLoaded', function() {
    const buttons = document.querySelectorAll('.btn');
    const display = document.getElementById('display');
    let currentInput = '';
    let operator = '';
    let firstOperand = null;
    buttons.forEach(button => {
        button.addEventListener('click', function() {
            const value = this.getAttribute('data-value');
            if (value === 'C') {
                currentInput = '';
                firstOperand = null;
                operator = '';
                display.textContent = '0';
                return;
            }
            if (value === '=') {
                if (firstOperand !== null && operator !== '' && currentInput !== '') {
                    currentInput = calculate(firstOperand, operator, parseFloat(currentInput));
                    display.textContent = currentInput;
                    firstOperand = null;
                    operator = '';
                }
                return;
            }
            if (['+', '-', '*', '/'].includes(value)) {
                if (firstOperand === null) {
                    firstOperand = parseFloat(currentInput);
                } else if (currentInput !== '') {
                    firstOperand = calculate(firstOperand, operator, parseFloat(currentInput));
                }
                operator = value;
                currentInput = '';
                return;
            }
            currentInput += value;
            display.textContent = currentInput;
        });
    });
    function calculate(a, operator, b) {
        switch (operator) {
            case '+':
                return a + b;
            case '-':
                return a - b;
            case '*':
                return a * b;
            case '/':
                return a / b;
            default:
                return b;
        }
    }
});

2、输入验证

为了确保计算器的输入是有效的，我们需要在用户输入时进行验证。例如，防止用户输入多个连续的运算符或无效的数字格式。

buttons.forEach(button => {
    button.addEventListener('click', function() {
        const value = this.getAttribute('data-value');
        if (value === 'C') {
            currentInput = '';
            firstOperand = null;
            operator = '';
            display.textContent = '0';
            return;
        }
        if (value === '=') {
            if (firstOperand !== null && operator !== '' && currentInput !== '') {
                currentInput = calculate(firstOperand, operator, parseFloat(currentInput));
                display.textContent = currentInput;
                firstOperand = null;
                operator = '';
            }
            return;
        }
        if (['+', '-', '*', '/'].includes(value)) {
            if (firstOperand === null) {
                firstOperand = parseFloat(currentInput);
            } else if (currentInput !== '') {
                firstOperand = calculate(firstOperand, operator, parseFloat(currentInput));
            }
            operator = value;
            currentInput = '';
            return;
        }
        if (value === '.' && currentInput.includes('.')) {
            return;
        }
        currentInput += value;
        display.textContent = currentInput;
    });
});

三、用户体验友好

为了提高用户体验，我们需要确保计算器在不同设备上都能正常使用，并且交互顺畅。以下是一些优化用户体验的方法。

1、响应式设计

使用媒体查询可以使计算器在不同屏幕尺寸上保持良好的显示效果。

@media (max-width: 600px) {
    .calculator {
        width: 100%;
        margin: 20px;
    }
    .btn {
        font-size: 1em;
        padding: 10px;
    }
    .display {
        font-size: 1.5em;
        padding: 10px;
    }
}

2、键盘支持

除了点击按钮，用户还应该能够通过键盘输入数字和操作符。这可以通过监听键盘事件来实现。

document.addEventListener('keydown', function(event) {
    const key = event.key;
    if (key === 'Enter') {
        const equalButton = document.querySelector('.equal');
        equalButton.click();
        return;
    }
    const button = document.querySelector(`.btn[data-value="${key}"]`);
    if (button) {
        button.click();
    }
});

通过这些步骤，我们可以确保计算器在不同设备上的可用性，并提供更流畅的用户体验。

四、扩展功能

在基本功能的基础上，我们可以考虑为计算器添加更多高级功能，例如科学计算、历史记录等。

1、科学计算功能

通过增加更多的按钮和相应的JavaScript逻辑，可以实现科学计算功能，例如平方根、幂次运算等。

<button class="btn" data-value="sqrt">√</button>
<button class="btn" data-value="^">^</button>

if (value === 'sqrt') {
    currentInput = Math.sqrt(parseFloat(currentInput)).toString();
    display.textContent = currentInput;
    return;
}
if (value === '^') {
    if (firstOperand === null) {
        firstOperand = parseFloat(currentInput);
    } else if (currentInput !== '') {
        firstOperand = Math.pow(firstOperand, parseFloat(currentInput));
    }
    operator = '^';
    currentInput = '';
    return;
}

2、历史记录功能

通过记录用户的每一步操作，可以实现计算历史记录功能，方便用户查看之前的计算结果。

<div class="history" id="history"></div>

const history = document.getElementById('history');
function addToHistory(expression, result) {
    const historyEntry = document.createElement('div');
    historyEntry.textContent = `${expression} = ${result}`;
    history.appendChild(historyEntry);
}
if (value === '=') {
    if (firstOperand !== null && operator !== '' && currentInput !== '') {
        const expression = `${firstOperand} ${operator} ${currentInput}`;
        currentInput = calculate(firstOperand, operator, parseFloat(currentInput));
        display.textContent = currentInput;
        addToHistory(expression, currentInput);
        firstOperand = null;
        operator = '';
    }
    return;
}

通过以上步骤，我们可以创建一个功能全面、用户体验友好的JavaScript计算器页面。随着技术的不断进步和用户需求的变化，我们还可以不断扩展和优化计算器的功能，为用户提供更好的服务。