当前位置：首页 > news >正文

HTML+CSS+JS计算器

news 2025/6/27 9:30:17

效果图

在这里插入图片描述

计算器功能详解

本计算器实现了多种功能，以下是所有功能的详细说明：

清空显示框 ©
- 功能: 清除显示框中的所有内容。
- 解释: 该功能用于重置计算器状态，清空当前输入的内容，使用户可以重新开始输入。
输入数字 (0-9)
- 功能: 将数字输入到显示框中。
- 解释: 数字按钮用于输入数学表达式中的数字部分。点击这些按钮会将相应的数字添加到显示框中。
输入小数点 (.)
- 功能: 在显示框中添加小数点。
- 解释: 小数点按钮用于输入小数。如果输入的数字中还没有小数点，则可以添加小数点，以便输入浮点数。
*输入操作符 (+, -, , /)
- 功能: 在显示框中添加数学运算符。
- 解释: 操作符按钮用于进行基本的数学运算，如加法、减法、乘法和除法。点击这些按钮会在显示框中添加相应的操作符。
输入括号 ((), () )
- 功能: 在显示框中添加左括号和右括号。
- 解释: 括号按钮用于在数学表达式中分组，影响运算顺序。点击左括号 ( 可以开始一个新的子表达式，而右括号 ) 可以结束当前子表达式。
计算结果 (=)
- 功能: 计算显示框中的数学表达式的结果。
- 解释: 等号按钮触发表达式的计算，显示计算结果。使用 eval 函数来计算表达式，处理括号和运算符。
内存清除 (MC)
- 功能: 清除内存中的值。
- 解释: 该功能用于将内存中的值重置为零，确保之前保存的值不再被使用。
内存召回 (MR)
- 功能: 从内存中恢复并显示值。
- 解释: 该功能将内存中保存的值显示到计算器的显示框中，便于进行进一步的运算。
内存加 (M+)
- 功能: 将当前显示的值加到内存中。
- 解释: 该功能将显示框中的值加到内存中保存的值上。用于在多次计算中积累结果。
内存减 (M-)
- 功能: 从内存中减去当前显示的值。
- 解释: 该功能将显示框中的值从内存中保存的值中减去。用于调整内存中的值。

源代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Calculator</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f4f8;margin: 0;font-family: Arial, sans-serif;}.calculator {border-radius: 15px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);background-color: white;width: 280px;padding: 10px;}#display {width: 100%;height: 50px;border: 1px solid #ccc;border-radius: 15px;text-align: right;padding: 10px;box-sizing: border-box;font-size: 24px;color: #333;margin-bottom: 10px;}.buttons {display: grid;grid-template-columns: repeat(4, 1fr);gap: 5px;}button {border: none;background-color: #007bff;color: white;font-size: 18px;padding: 15px;border-radius: 15px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);cursor: pointer;}button:hover {background-color: #0056b3;}button:active {background-color: #004080;}</style>
</head>
<body><div class="calculator"><input type="text" id="display" readonly><div class="buttons"><button onclick="clearDisplay()">C</button><button onclick="appendOperator('(')">(</button><button onclick="appendOperator(')')">)</button><button onclick="appendOperator('/')">/</button><button onclick="appendNumber('7')">7</button><button onclick="appendNumber('8')">8</button><button onclick="appendNumber('9')">9</button><button onclick="appendOperator('*')">*</button><button onclick="appendNumber('4')">4</button><button onclick="appendNumber('5')">5</button><button onclick="appendNumber('6')">6</button><button onclick="appendOperator('-')">-</button><button onclick="appendNumber('1')">1</button><button onclick="appendNumber('2')">2</button><button onclick="appendNumber('3')">3</button><button onclick="appendOperator('+')">+</button><button onclick="appendNumber('0')">0</button><button onclick="appendOperator('.')">.</button><button onclick="calculateResult()">=</button><button onclick="memoryClear()">MC</button><button onclick="memoryRecall()">MR</button><button onclick="memoryAdd()">M+</button><button onclick="memorySubtract()">M-</button></div></div><script>let display = document.getElementById('display');let memory = 0;let shouldResetDisplay = false;function clearDisplay() {display.value = '';}function appendNumber(number) {if (shouldResetDisplay) {display.value = '';shouldResetDisplay = false;}display.value += number;}function appendOperator(operator) {if (shouldResetDisplay) {display.value = '';shouldResetDisplay = false;}display.value += ` ${operator} `;}function calculateResult() {try {// Evaluate the expression, considering possible parenthesesdisplay.value = eval(display.value);shouldResetDisplay = true;} catch {display.value = 'Error';}}function memoryClear() {memory = 0;}function memoryRecall() {display.value = memory;}function memoryAdd() {memory += parseFloat(display.value) || 0;}function memorySubtract() {memory -= parseFloat(display.value) || 0;}</script>
</body>
</html>

JS详解

当然，下面我会详细解释JavaScript部分的代码。

变量和初始化

let display = document.getElementById('display');
let memory = 0;
let shouldResetDisplay = false;

let display = document.getElementById('display');：这行代码通过getElementById方法获取页面中ID为display的元素，并将其赋值给display变量。这个元素是一个<input>标签，用于显示计算器的当前输入或结果。
let memory = 0;：初始化一个变量memory，用于存储计算器的内存值。在这个例子中，内存值被初始化为0。
let shouldResetDisplay = false;：这个变量是一个布尔值，用于控制是否需要重置显示。在计算结果之后，通常需要清空输入框，以便用户可以开始新的计算。

功能函数

清除显示

function clearDisplay() {display.value = '';
}

function clearDisplay() { ... }：定义了一个名为clearDisplay的函数，用于清空显示。当用户点击’C’按钮时，这个函数会被调用。
display.value = '';：将输入框的值设置为空字符串，从而清空显示。

添加数字

function appendNumber(number) {if (shouldResetDisplay) {display.value = '';shouldResetDisplay = false;}display.value += number;
}

function appendNumber(number) { ... }：定义了一个名为appendNumber的函数，用于向显示中添加一个数字。
if (shouldResetDisplay) { ... }：检查shouldResetDisplay变量，如果为true，则清空显示并重置标志。
display.value += number;：将传入的数字number添加到输入框的当前值后面。

添加操作符

function appendOperator(operator) {if (shouldResetDisplay) {display.value = '';shouldResetDisplay = false;}display.value += ` ${operator} `;
}

function appendOperator(operator) { ... }：定义了一个名为appendOperator的函数，用于向显示中添加一个操作符。
display.value += ${operator};`：将操作符添加到输入框的当前值后面，并在操作符前后添加一个空格，以保持表达式格式。

计算结果

function calculateResult() {try {// Evaluate the expression, considering possible parenthesesdisplay.value = eval(display.value);shouldResetDisplay = true;} catch {display.value = 'Error';}
}

function calculateResult() { ... }：定义了一个名为calculateResult的函数，用于计算显示中的表达式。
try { ... } catch { ... }：使用try-catch语句来捕获并处理可能发生的错误。
display.value = eval(display.value);：使用eval函数计算输入框中的表达式，并将结果赋值给display.value。
shouldResetDisplay = true;：在计算结果后，设置shouldResetDisplay为true，以便在下次输入时清空显示。

内存操作

function memoryClear() {memory = 0;
}function memoryRecall() {display.value = memory;
}function memoryAdd() {memory += parseFloat(display.value) || 0;
}function memorySubtract() {memory -= parseFloat(display.value) || 0;
}

function memoryClear() { memory = 0; }：定义了一个名为memoryClear的函数，用于清空内存。
function memoryRecall() { display.value = memory; }：定义了一个名为memoryRecall的函数，用于将内存中的值显示在输入框中。
function memoryAdd() { memory += parseFloat(display.value) || 0; }：定义了一个名为memoryAdd的函数，用于将当前显示的值加到内存中。如果显示为空，则默认加0。
function memorySubtract() { memory -= parseFloat(display.value) || 0; }：定义了一个名为memorySubtract的函数，用于从内存中减去当前显示的值。如果显示为空，则默认减0。

送大家一段话：

笔走龙蛇，意境深远。言之有物，情真意切。
辞藻华丽，意蕴深厚。文思敏捷，才华横溢。
洞若观火，鞭辟入里。文采飞扬，笔力雄健。
行云流水，流畅自然。精辟入里，洞察秋毫。
妙语连珠，引人入胜。深入骨髓，发人深省。
豁然开朗，醍醐灌顶。言之凿凿，掷地金声。
言近旨远，韵味无穷。淋漓尽致，曲尽其妙。
独具匠心，匠心独运。笔底春风，笔下生花。
字字玑珠，句句珠玑。意味深长，耐人寻味。

人话
写作技巧高超，文章意境深远。内容真实感人，情感表达真诚。用词华丽而富有内涵，作者思维敏捷且才华出众。观察事物深刻透彻，分析问题直击要害。文笔生动活泼，才华横溢。文章如同行云流水般流畅自然。分析精辟，能够洞察细微之处。言语中充满智慧，让人读来兴趣盎然。剖析问题深入本质，能引发读者深思。给人以豁然开朗的感觉，像醍醐灌顶一般让人清醒。言辞确凿有力，话语坚定响亮。言简意赅却含义深远，令人回味无穷。表达淋漓尽致，把事情描绘得细致入微。构思独特巧妙，展现了作者的独特匠心。文笔优美，仿佛春风拂面，笔下的文字如同花朵盛开。每个字都精心雕琢，每一句话都充满力量。文章意味深长，值得反复品味。

效果图