基础版计算器
这是一个最简单的计算器,只能进行加、减、乘、除四则运算，代码结构清晰，非常适合初学者理解。
（图片来源网络，侵删）
代码 (HTML + CSS + JavaScript)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">基础计算器</title>
<style>
/* 基础样式 */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.calculator {
border: 2px solid #ccc;
border-radius: 10px;
padding: 20px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.display {
width: 100%;
height: 40px;
margin-bottom: 15px;
text-align: right;
padding-right: 10px;
font-size: 20px;
border: 1px solid #ddd;
border-radius: 5px;
box-sizing: border-box; /* 确保 padding 不会影响宽度 */
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
height: 50px;
font-size: 18px;
border: 1px solid #bbb;
border-radius: 5px;
cursor: pointer;
background-color: #e9e9e9;
}
button:hover {
background-color: #d0d0d0;
}
.operator {
background-color: #f59e0b; /* 运算符用橙色 */
color: white;
}
.operator:hover {
background-color: #d97706;
}
.equals {
background-color: #10b981; /* 等号用绿色 */
color: white;
}
.equals:hover {
background-color: #059669;
}
</style>
</head>
<body>
<form name="calculatorForm" class="calculator">
<!-- 显示屏 -->
<input type="text" name="display" class="display" readonly>
<!-- 按钮组 -->
<div class="buttons">
<button type="button" value="7">7</button>
<button type="button" value="8">8</button>
<button type="button" value="9">9</button>
<button type="button" value="/" class="operator">/</button>
<button type="button" value="4">4</button>
<button type="button" value="5">5</button>
<button type="button" value="6">6</button>
<button type="button" value="*" class="operator">*</button>
<button type="button" value="1">1</button>
<button type="button" value="2">2</button>
<button type="button" value="3">3</button>
<button type="button" value="-" class="operator">-</button>
<button type="button" value="C" onclick="clearDisplay()">C</button>
<button type="button" value="0">0</button>
<button type="button" value="=" class="equals" onclick="calculate()">=</button>
<button type="button" value="+" class="operator">+</button>
</div>
</form>
<script>
const form = document.forms['calculatorForm'];
const display = form.elements['display'];
// 为所有数字和运算符按钮添加点击事件
document.querySelectorAll('.buttons button:not(.equals):not([onclick])').forEach(button => {
button.addEventListener('click', () => {
display.value += button.value;
});
});
// 清除显示屏
function clearDisplay() {
display.value = '';
}
// 计算结果
function calculate() {
try {
// 使用 eval() 计算表达式（注意：eval 有安全风险，但在此受控环境中是安全的）
const result = eval(display.value);
display.value = result;
} catch (error) {
display.value = 'Error';
setTimeout(clearDisplay, 1500); // 1.5秒后自动清除错误
}
}
</script>
</body>
</html>
代码解析
-
HTML 结构 (
<form>):<form name="calculatorForm">: 创建一个表单，并给它一个name属性，方便 JavaScript 通过document.forms访问。<input type="text" name="display" class="display" readonly>: 这是计算器的显示屏。type="text": 定义为文本输入框。name="display": 给输入框一个名字，用于在 JavaScript 中获取它 (form.elements['display'])。readonly: 关键属性！它让用户无法直接用键盘在输入框里输入内容，只能通过点击按钮来改变值，这更符合计算器的行为。
<button>: 每个按钮都是一个可点击的元素。type="button": 对于非提交按钮（如数字和运算符），明确指定type="button"，防止它们默认触发表单的submit行为。value="...": 按钮上显示的文本，也是点击时将要添加到显示屏的值。onclick="...": 为“清除”和“等于”按钮绑定了直接执行的 JavaScript 函数。
-
CSS 样式:
- 使用
flexbox将计算器完美地居中在屏幕上。 .calculator容器设置了边框、圆角和阴影，使其看起来像一个实体设备。.buttons使用CSS Grid布局，轻松创建了 4x4 的按钮网格。- 为不同类型的按钮（数字、运算符、等号）设置了不同的背景色，提升用户体验。
- 使用
-
JavaScript 逻辑:
- 获取元素:
const form = document.forms['calculatorForm'];和const display = form.elements['display'];获取了表单和显示屏的 DOM 元素。 - 数字/运算符按钮: 使用
querySelectorAll选中所有需要添加点击事件的按钮，然后遍历并为它们添加一个事件监听器，点击时，将按钮的value追加到display.value的末尾。 clearDisplay()函数: 将display.value设置为空字符串。calculate()函数:- 使用
try...catch包裹eval(display.value)。eval()会执行一个字符串作为 JavaScript 代码，非常适合计算数学表达式。 try块尝试计算表达式并显示结果。- 如果用户输入了无效的表达式（如
5++），eval()会抛出错误，catch块会捕获这个错误，在显示屏上显示 "Error"，并在 1.5 秒后自动清除。
- 使用
- 获取元素:
功能增强版计算器
这个版本在基础版上增加了更多功能,如小数点、正负号切换、百分比计算和退格键。
（图片来源网络，侵删）
代码 (HTML + CSS + JavaScript)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">功能增强计算器</title>
<style>
/* 样式与基础版类似，可以复制或做微调 */
body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f4f4f9; margin: 0; }
.calculator { border-radius: 15px; padding: 25px; background: linear-gradient(145deg, #ffffff, #e6e6e6); box-shadow: 8px 8px 16px #d1d1d1, -8px -8px 16px #ffffff; }
.display { width: 100%; height: 60px; margin-bottom: 20px; text-align: right; padding-right: 15px; font-size: 28px; border: none; border-radius: 10px; background-color: #f8f8f8; box-sizing: border-box; }
.buttons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
button { height: 55px; font-size: 20px; border: none; border-radius: 10px; cursor: pointer; font-weight: bold; }
button:hover { transform: translateY(2px); }
.number { background-color: #e0e0e0; }
.operator { background-color: #ff9500; color: white; }
.function { background-color: #a5a5a5; color: white; }
.equals { background-color: #ff3b30; color: white; grid-column: span 2; }
</style>
</head>
<body>
<form name="calculatorForm" class="calculator">
<input type="text" name="display" class="display" readonly>
<div class="buttons">
<button type="button" value="AC" class="function" onclick="clearAll()">AC</button>
<button type="button" value="⌫" class="function" onclick="backspace()">⌫</button>
<button type="button" value="%" class="operator" onclick="appendToDisplay('%')">%</button>
<button type="button" value="/" class="operator" onclick="appendToDisplay('/')">/</button>
<button type="button" value="7" class="number" onclick="appendToDisplay('7')">7</button>
<button type="button" value="8" class="number" onclick="appendToDisplay('8')">8</button>
<button type="button" value="9" class="number" onclick="appendToDisplay('9')">9</button>
<button type="button" value="*" class="operator" onclick="appendToDisplay('*')">×</button>
<button type="button" value="4" class="number" onclick="appendToDisplay('4')">4</button>
<button type="button" value="5" class="number" onclick="appendToDisplay('5')">5</button>
<button type="button" value="6" class="number" onclick="appendToDisplay('6')">6</button>
<button type="button" value="-" class="operator" onclick="appendToDisplay('-')">-</button>
<button type="button" value="1" class="number" onclick="appendToDisplay('1')">1</button>
<button type="button" value="2" class="number" onclick="appendToDisplay('2')">2</button>
<button type="button" value="3" class="number" onclick="appendToDisplay('3')">3</button>
<button type="button" value="+" class="operator" onclick="appendToDisplay('+')">+</button>
<button type="button" value="±" class="function" onclick="toggleSign()">±</button>
<button type="button" value="0" class="number" onclick="appendToDisplay('0')">0</button>
<button type="button" value="." class="function" onclick="appendToDisplay('.')">.</button>
<button type="button" value="=" class="equals" onclick="calculate()">=</button>
</div>
</form>
<script>
const form = document.forms['calculatorForm'];
const display = form.elements['display'];
function appendToDisplay(value) {
// 防止输入多个小数点
if (value === '.' && display.value.includes('.')) {
return;
}
display.value += value;
}
function clearAll() {
display.value = '';
}
function backspace() {
display.value = display.value.slice(0, -1);
}
function toggleSign() {
if (display.value) {
display.value = parseFloat(display.value) * -1;
}
}
function calculate() {
try {
// 替换显示符号 × 为 * 以便 eval 计算
const expression = display.value.replace(/×/g, '*');
display.value = eval(expression);
} catch (error) {
display.value = 'Error';
setTimeout(clearAll, 1500);
}
}
</script>
</body>
</html>
主要改进
- 更多按钮: 增加了清除全部、退格、正负号、小数点、百分比等功能。
- 更精细的样式: 使用了渐变背景和更现代的按钮设计。
- 更健壮的 JavaScript:
appendToDisplay(): 封装了添加字符的逻辑，并增加了防止输入多个小数点的逻辑。backspace(): 使用slice(0, -1)实现退格功能。toggleSign(): 将当前数字乘以 -1 来切换正负号。calculate(): 在计算前，将显示的乘号 替换为 ，因为eval只认识 。
使用 <input type="button"> 的版本
这个版本在 HTML 结构上略有不同，所有按钮都使用 <input type="button">，这是一种更传统的做法，功能与版本 2 完全相同。
代码 (仅展示 <form> 内部和部分 JS)
<!-- ... (head 部分的 CSS 与版本 2 相同) ... -->
<body>
<form name="calculatorForm" class="calculator">
<input type="text" name="display" class="display" readonly>
<div class="buttons">
<!-- 使用 input type="button" -->
<input type="button" value="AC" class="function" onclick="clearAll()">
<input type="button" value="⌫" class="function" onclick="backspace()">
<input type="button" value="%" class="operator" onclick="appendToDisplay('%')">
<input type="button" value="/" class="operator" onclick="appendToDisplay('/')">
<input type="button" value="7" class="number" onclick="appendToDisplay('7')">
<!-- ... 其他按钮类似 ... -->
<input type="button" value="=" class="equals" onclick="calculate()">
</div>
</form>
<script>
// JavaScript 逻辑与版本 2 完全相同
const form = document.forms['calculatorForm'];
const display = form.elements['display'];
function appendToDisplay(value) {
if (value === '.' && display.value.includes('.')) return;
display.value += value;
}
function clearAll() { /* ... */ }
function backspace() { /* ... */ }
function toggleSign() { /* ... */ }
function calculate() { /* ... */ }
</script>
</body>
</html>
与版本 2 的区别
- HTML: 将所有
<button>标签替换为<input type="button">。<input type="button">是一个自闭合标签，没有结束标签。- 按钮的文本内容通过
value属性设置，而不是放在标签中间。 - 在功能上,
<button>和<input type="button">几乎没有区别。<button>更灵活，可以在里面放 HTML 内容（如图片、图标），而<input>只能显示纯文本。
| 特性 | 基础版 | 功能增强版 | <input type="button"> 版 |
|---|---|---|---|
| 核心结构 | <form> + <input readonly> + <button> |
<form> + <input readonly> + <button> |
<form> + <input readonly> + <input type="button"> |
| 功能 | 四则运算 | 四则运算、小数点、退格、正负号、百分比 | 与功能增强版相同 |
| 样式 | 简单、清晰 | 现代、美观 | 与功能增强版相同 |
| JavaScript | 基础事件绑定 | 更健壮、功能更丰富 | 与功能增强版相同 |
| 适用场景 | 学习基础概念、快速实现 | 实用、功能完善的个人项目 | 传统网页开发、偏好 <input> 标签的场景 |
您可以根据自己的需求选择合适的版本进行学习和修改,版本 2 是一个功能完整、设计现代的优秀范例。
