js怎么制作简单计算器

如何用JavaScript制作简单计算器

使用JavaScript制作简单计算器的方法包括：创建HTML结构、编写CSS样式、编写JavaScript逻辑、实现基本运算功能、处理用户输入。 其中，编写JavaScript逻辑是最关键的一步，因为它决定了计算器能否正确处理用户输入和执行运算。下面将详细展开如何编写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>Simple Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <div class="display" id="display"></div>
        <div class="buttons">
            <button class="button" data-value="7">7</button>
            <button class="button" data-value="8">8</button>
            <button class="button" data-value="9">9</button>
            <button class="button" data-value="/">/</button>
            <button class="button" data-value="4">4</button>
            <button class="button" data-value="5">5</button>
            <button class="button" data-value="6">6</button>
            <button class="button" data-value="*">*</button>
            <button class="button" data-value="1">1</button>
            <button class="button" data-value="2">2</button>
            <button class="button" data-value="3">3</button>
            <button class="button" data-value="-">-</button>
            <button class="button" data-value="0">0</button>
            <button class="button" data-value=".">.</button>
            <button class="button" data-value="=">=</button>
            <button class="button" data-value="+">+</button>
            <button class="button" data-value="C">C</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: #f0f0f0;
    margin: 0;
    font-family: Arial, sans-serif;
}
.calculator {
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.display {
    height: 50px;
    background-color: #222;
    color: #fff;
    font-size: 2em;
    text-align: right;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
}
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
}
.button {
    height: 50px;
    font-size: 1.5em;
    border: none;
    border-radius: 5px;
    background-color: #f0f0f0;
    cursor: pointer;
}
.button:hover {
    background-color: #ddd;
}

三、编写JavaScript逻辑

编写JavaScript逻辑是使计算器功能化的关键步骤。包括：初始化变量、处理按钮点击事件、执行基本运算。

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

四、实现基本运算功能

在JavaScript逻辑中，最核心的部分是实现基本的加、减、乘、除运算。通过一个简单的函数来实现：

function evaluate(a, b, operator) {
    a = parseFloat(a);
    b = parseFloat(b);
    switch (operator) {
        case '+':
            return (a + b).toString();
        case '-':
            return (a - b).toString();
        case '*':
            return (a * b).toString();
        case '/':
            return (a / b).toString();
        default:
            return '';
    }
}

这个函数接受两个操作数和一个运算符，根据运算符执行相应的运算并返回结果。

五、处理用户输入

用户输入处理主要通过按钮点击事件来实现。每个按钮对应一个事件处理函数，根据按钮的值来更新当前输入、执行运算或清除输入。

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

六、改进和优化

制作一个基本的计算器只是第一步，后续可以根据需求进行改进和优化。例如：

增加高级运算功能：如平方根、百分比、幂运算等。
添加键盘输入支持：让用户可以通过键盘输入数字和运算符。
优化用户界面：使界面更加美观和易用。

七、推荐项目管理系统

在开发过程中，良好的项目管理系统可以提高开发效率。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile来管理项目任务和团队协作。

通过以上步骤，我们可以制作出一个简单且功能基本齐全的JavaScript计算器。后续可以根据需求进行更多的功能扩展和优化。