JavaScript题目三制作简易计算器

标签：题目 currentInput color button JavaScript value 按钮 display 计算器

目标：

提供四个基本的运算功能：加、减、乘、除。
支持数字输入和运算符输入。
显示结果。

1. HTML 文件 (`index.html`)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易计算器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }
        .calculator {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        #display {
            width: 240px;
            height: 50px;
            font-size: 24px;
            text-align: right;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #eaeaea;
        }
        .button-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }
        .button {
            padding: 20px;
            font-size: 18px;
            background-color: #f1f1f1;
            border: 1px solid #ccc;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .button:hover {
            background-color: #e0e0e0;
        }
        .button:active {
            background-color: #ccc;
        }
        .button.operator {
            background-color: #f0a500;
            color: white;
        }
        .button.operator:hover {
            background-color: #d98e00;
        }
        .button.double {
            grid-column: span 2;
        }
        .button.clear {
            background-color: #ff5252;
            color: white;
        }
        .button.clear:hover {
            background-color: #e04747;
        }
    </style>
</head>
<body>

<div class="calculator">
    <input type="text" id="display" disabled>
    <div class="button-container">
        <button class="button clear" id="clear">C</button>
        <button class="button operator" id="divide">/</button>
        <button class="button operator" id="multiply">*</button>
        <button class="button operator" id="subtract">-</button>
        <button class="button" id="7">7</button>
        <button class="button" id="8">8</button>
        <button class="button" id="9">9</button>
        <button class="button operator" id="add">+</button>
        <button class="button" id="4">4</button>
        <button class="button" id="5">5</button>
        <button class="button" id="6">6</button>
        <button class="button double" id="equals">=</button>
        <button class="button" id="1">1</button>
        <button class="button" id="2">2</button>
        <button class="button" id="3">3</button>
        <button class="button" id="0">0</button>
        <button class="button" id="decimal">.</button>
    </div>
</div>

<script src="calculator.js"></script>

</body>
</html>

2. JavaScript 文件 (calculator.js)

// 获取显示屏和所有按钮
const display = document.getElementById('display');
const buttons = document.querySelectorAll('.button');
const clearButton = document.getElementById('clear');
const equalsButton = document.getElementById('equals');

// 用于存储当前显示的计算表达式
let currentInput = '';

// 为每个按钮添加事件监听器
buttons.forEach(button => {
    button.addEventListener('click', () => {
        const value = button.textContent;

        // 如果点击了数字或小数点
        if (!isNaN(value) || value === '.') {
            currentInput += value;
            display.value = currentInput;
        }
        // 如果点击了运算符
        else if (['+', '-', '*', '/'].includes(value)) {
            currentInput += ` ${value} `;
            display.value = currentInput;
        }
        // 如果点击了等于按钮，计算结果
        else if (value === '=') {
            try {
                // 使用 eval 计算表达式的值
                currentInput = eval(currentInput).toString();
                display.value = currentInput;
            } catch (e) {
                display.value = '错误';
                currentInput = '';
            }
        }
    });
});

// 清空显示屏的功能
clearButton.addEventListener('click', () => {
    currentInput = '';
    display.value = '';
});

解释：

HTML 结构：

计算器界面：
- 一个 input 元素用于显示当前的输入和结果，id="display"，并设置为不可编辑（disabled）。
- 一个 div 容器（button-container）包含了所有的计算器按钮，包括数字按钮、运算符按钮、清除按钮、等于按钮等。
样式：
- 使用 CSS 来布局和美化计算器，使用 grid 来使按钮有规则地排列。
- 特别为运算符按钮添加了一个 .operator 类，使其背景颜色不同于数字按钮。

JavaScript 逻辑：

获取元素：
- display 是用于显示输入和结果的文本框。
- buttons 是所有的按钮，通过 querySelectorAll 获取。
按钮事件监听：
- 数字和小数点按钮：当用户点击数字或小数点按钮时，将值添加到 currentInput，然后更新显示屏。
- 运算符按钮：当用户点击运算符（如 +、-、*、/）时，运算符会被添加到 currentInput，并在显示屏上显示。
- 等于按钮：当用户点击等于按钮时，使用 eval() 函数计算 currentInput 表达式的值。如果计算成功，显示结果；如果有错误（例如输入了非法表达式），显示“错误”并清空输入。
- 清除按钮：点击清除按钮时，清空当前输入和显示屏。
错误处理：
- 使用 try...catch 语句来捕获错误并显示“错误”，防止用户输入无效的表达式导致程序崩溃。

运行效果：

你将看到一个简单的计算器界面，能够进行加、减、乘、除等基本计算。
用户可以点击数字、运算符按钮，输入表达式并点击“=”来获取计算结果。
点击“C”按钮可以清空输入框。

总结：

这个计算器应用实现了基础的加减乘除运算，使用了 HTML、CSS 和 JavaScript。
通过分离 HTML、CSS 和 JavaScript，使得代码结构清晰，便于维护。
使用 eval() 进行简单的数学表达式求值，但在实际生产中，应该避免使用 eval()，因为它会带来安全风险。

4o mini

标签：题目,currentInput,color,button,JavaScript,value,按钮,display,计算器
From： https://blog.csdn.net/wtt12344321/article/details/143656322

JavaScript题目三制作简易计算器

目标：

1. HTML 文件 (`index.html`)

解释：

HTML 结构：

JavaScript 逻辑：

运行效果：

总结：

相关文章

赞助商

阅读排行

JavaScript题目三 制作简易计算器

目标：

1. HTML 文件 (index.html)

解释：

HTML 结构：

JavaScript 逻辑：

运行效果：

总结：

相关文章

赞助商

阅读排行

JavaScript题目三制作简易计算器

1. HTML 文件 (`index.html`)