计算器案例js代码怎么用

计算器案例JS代码的使用方法

在使用JavaScript编写计算器案例时，核心要点包括：HTML结构、CSS样式、JavaScript逻辑。其中，JavaScript逻辑是实现计算功能的关键部分。本文将详细介绍如何通过JavaScript实现一个简单的计算器，包括基本的加减乘除操作。以下为详细描述：

一、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">
        <div class="display" id="display"></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="=">=</button>
            <button class="btn" data-value="+">+</button>
            <button class="btn" 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;
}
.calculator {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.display {
    height: 50px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: right;
    padding: 10px;
    font-size: 2em;
}
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.btn {
    padding: 20px;
    font-size: 1.5em;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    cursor: pointer;
    transition: background-color 0.3s;
}
.btn:hover {
    background-color: #e0e0e0;
}

三、JavaScript逻辑

JavaScript逻辑是计算器的核心部分，用于处理用户输入和计算结果。

document.addEventListener('DOMContentLoaded', function () {
    const display = document.getElementById('display');
    const buttons = Array.from(document.getElementsByClassName('btn'));
    buttons.map(button => {
        button.addEventListener('click', (e) => {
            const value = e.target.getAttribute('data-value');
            if (value === 'C') {
                display.innerText = '';
            } else if (value === '=') {
                try {
                    display.innerText = eval(display.innerText);
                } catch {
                    display.innerText = 'Error';
                }
            } else {
                display.innerText += value;
            }
        });
    });
});

四、功能实现

1、显示屏功能

显示屏用于显示用户输入的数字和操作符，以及计算结果。每个按钮的点击事件都会更新显示屏的内容。

const display = document.getElementById('display');

2、按钮事件处理

通过为每个按钮添加点击事件监听器，可以捕捉用户输入的数字和操作符，并将其显示在显示屏上。

buttons.map(button => {
    button.addEventListener('click', (e) => {
        const value = e.target.getAttribute('data-value');
        display.innerText += value;
    });
});

3、清屏功能

清屏按钮（C）用于清除显示屏上的内容，用户每次点击该按钮时，显示屏内容会被清空。

if (value === 'C') {
    display.innerText = '';
}

4、计算功能

当用户点击等号按钮（=）时，计算器会对显示屏上的表达式进行求值，并显示结果。如果输入的表达式有误，则显示错误信息。

if (value === '=') {
    try {
        display.innerText = eval(display.innerText);
    } catch {
        display.innerText = 'Error';
    }
}

5、错误处理

为了避免用户输入错误的表达式导致程序崩溃，使用try-catch语句捕捉错误，并在显示屏上显示“Error”。

try {
    display.innerText = eval(display.innerText);
} catch {
    display.innerText = 'Error';
}

五、总结

通过以上步骤，我们完成了一个简单的JavaScript计算器。这个计算器具有基本的加减乘除功能，能够处理用户的数字和操作符输入，并显示计算结果。通过HTML、CSS和JavaScript的结合，我们实现了一个功能完整的计算器。

在实际项目开发中，如果需要更复杂的功能和更好的用户体验，可以考虑使用更高级的技术和工具，比如React、Vue等前端框架，以及研发项目管理系统PingCode和通用项目协作软件Worktile来高效管理和协作开发项目。