效果图
计算器功能详解
本计算器实现了多种功能,以下是所有功能的详细说明:
-
清空显示框 ©
- 功能: 清除显示框中的所有内容。
- 解释: 该功能用于重置计算器状态,清空当前输入的内容,使用户可以重新开始输入。
-
输入数字 (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 parentheses
display.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 parentheses
display.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。
送大家一段话:
笔走龙蛇,意境深远。言之有物,情真意切。
辞藻华丽,意蕴深厚。文思敏捷,才华横溢。
洞若观火,鞭辟入里。文采飞扬,笔力雄健。
行云流水,流畅自然。精辟入里,洞察秋毫。
妙语连珠,引人入胜。深入骨髓,发人深省。
豁然开朗,醍醐灌顶。言之凿凿,掷地金声。
言近旨远,韵味无穷。淋漓尽致,曲尽其妙。
独具匠心,匠心独运。笔底春风,笔下生花。
字字玑珠,句句珠玑。意味深长,耐人寻味。
人话
写作技巧高超,文章意境深远。内容真实感人,情感表达真诚。用词华丽而富有内涵,作者思维敏捷且才华出众。观察事物深刻透彻,分析问题直击要害。文笔生动活泼,才华横溢。文章如同行云流水般流畅自然。分析精辟,能够洞察细微之处。言语中充满智慧,让人读来兴趣盎然。剖析问题深入本质,能引发读者深思。给人以豁然开朗的感觉,像醍醐灌顶一般让人清醒。言辞确凿有力,话语坚定响亮。言简意赅却含义深远,令人回味无穷。表达淋漓尽致,把事情描绘得细致入微。构思独特巧妙,展现了作者的独特匠心。文笔优美,仿佛春风拂面,笔下的文字如同花朵盛开。每个字都精心雕琢,每一句话都充满力量。文章意味深长,值得反复品味。