最简单的 HTML/CSS/JS 计算器
这个版本非常适合初学者,代码结构清晰，易于理解和修改。
源码下载
您可以直接将以下代码复制并保存为一个 .html 文件。
文件名：simple-calculator.html
<!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 {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.calculator {
border: 2px solid #333;
border-radius: 10px;
padding: 20px;
background-color: #fff;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.display {
width: 100%;
height: 50px;
font-size: 24px;
text-align: right;
margin-bottom: 15px;
padding: 0 10px;
border: 1px solid #ccc;
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 #ccc;
border-radius: 5px;
cursor: pointer;
background-color: #e9e9e9;
transition: background-color 0.2s;
}
button:hover {
background-color: #d0d0d0;
}
.operator {
background-color: #ff9500;
color: white;
}
.operator:hover {
background-color: #e68600;
}
.equals {
background-color: #2ecc71;
color: white;
grid-column: span 2;
}
.equals:hover {
background-color: #27ae60;
}
.clear {
background-color: #e74c3c;
color: white;
}
.clear:hover {
background-color: #c0392b;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" class="display" id="display" readonly>
<div class="buttons">
<button class="clear" onclick="clearDisplay()">C</button>
<button onclick="appendToDisplay('(')">(</button>
<button onclick="appendToDisplay(')')">)</button>
<button class="operator" onclick="appendToDisplay('/')">/</button>
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button class="operator" onclick="appendToDisplay('*')">×</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button class="operator" onclick="appendToDisplay('-')">-</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button class="operator" onclick="appendToDisplay('+')">+</button>
<button onclick="appendToDisplay('0')">0</button>
<button onclick="appendToDisplay('.')">.</button>
<button class="equals" onclick="calculate()">=</button>
</div>
</div>
<script>
const display = document.getElementById('display');
function appendToDisplay(value) {
display.value += value;
}
function clearDisplay() {
display.value = '';
}
function calculate() {
try {
// 使用 eval() 来计算表达式，注意 eval 有安全风险，但在这里是安全的，因为输入完全由用户控制。
const result = eval(display.value);
display.value = result;
} catch (error) {
display.value = 'Error';
}
}
</script>
</body>
</html>
如何运行
- 创建文件：将上面的代码完整复制，粘贴到一个新的文本文件中。
- 保存文件：将文件另存为
simple-calculator.html（确保后缀名是.html，而不是.txt）。 - 打开文件：直接用浏览器（如 Chrome, Firefox, Edge）双击打开这个
html文件即可看到计算器并使用。
功能更完善的科学计算器
这个版本增加了更多功能,如三角函数、对数、幂运算等，代码结构也更模块化。
源码下载
同样,您可以将以下代码保存为 .html 文件。
文件名：scientific-calculator.html
<!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 { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #222; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.calculator { border: 2px solid #444; border-radius: 15px; padding: 20px; background-color: #333; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.display { width: 100%; height: 60px; font-size: 28px; text-align: right; margin-bottom: 15px; padding: 0 15px; border: none; border-radius: 8px; background-color: #111; color: #fff; box-sizing: border-box; }
.buttons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
button { height: 50px; font-size: 16px; border: none; border-radius: 8px; cursor: pointer; color: #fff; transition: all 0.2s; font-weight: bold; }
.number { background-color: #555; }
.number:hover { background-color: #666; }
.operator { background-color: #ff9500; }
.operator:hover { background-color: #e68600; }
.equals { background-color: #2ecc71; grid-column: span 2; }
.equals:hover { background-color: #27ae60; }
.clear { background-color: #e74c3c; }
.clear:hover { background-color: #c0392b; }
.function { background-color: #9b59b6; }
.function:hover { background-color: #8e44ad; }
.memory { background-color: #34495e; }
.memory:hover { background-color: #2c3e50; }
</style>
</head>
<body>
<div class="calculator">
<input type="text" class="display" id="display" readonly>
<div class="buttons">
<!-- 第一行：清除和括号 -->
<button class="clear" onclick="clearDisplay()">C</button>
<button class="clear" onclick="clearEntry()">CE</button>
<button class="function" onclick="appendToDisplay('(')">(</button>
<button class="function" onclick="appendToDisplay(')')">)</button>
<button class="function" onclick="backspace()">⌫</button>
<!-- 第二行：科学函数 -->
<button class="function" onclick="appendFunction('sin(')">sin</button>
<button class="function" onclick="appendFunction('cos(')">cos</button>
<button class="function" onclick="appendFunction('tan(')">tan</button>
<button class="function" onclick="appendFunction('log(')">log</button>
<button class="function" onclick="appendFunction('sqrt(')">√</button>
<!-- 第三行：数字和基本运算 -->
<button class="number" onclick="appendToDisplay('7')">7</button>
<button class="number" onclick="appendToDisplay('8')">8</button>
<button class="number" onclick="appendToDisplay('9')">9</button>
<button class="operator" onclick="appendToDisplay('/')">/</button>
<button class="memory" onclick="memoryOperation('MS')">MS</button>
<!-- 第四行 -->
<button class="number" onclick="appendToDisplay('4')">4</button>
<button class="number" onclick="appendToDisplay('5')">5</button>
<button class="number" onclick="appendToDisplay('6')">6</button>
<button class="operator" onclick="appendToDisplay('*')">×</button>
<button class="memory" onclick="memoryOperation('MR')">MR</button>
<!-- 第五行 -->
<button class="number" onclick="appendToDisplay('1')">1</button>
<button class="number" onclick="appendToDisplay('2')">2</button>
<button class="number" onclick="appendToDisplay('3')">3</button>
<button class="operator" onclick="appendToDisplay('-')">-</button>
<button class="memory" onclick="memoryOperation('M+')">M+</button>
<!-- 第六行 -->
<button class="number" onclick="appendToDisplay('0')">0</button>
<button class="number" onclick="appendToDisplay('.')">.</button>
<button class="number" onclick="appendToDisplay('^')">^</button>
<button class="operator" onclick="appendToDisplay('+')">+</button>
<button class="memory" onclick="memoryOperation('MC')">MC</button>
<!-- 第七行：等号 -->
<button class="equals" onclick="calculate()">=</button>
</div>
</div>
<script>
const display = document.getElementById('display');
let memory = 0;
function appendToDisplay(value) {
display.value += value;
}
function clearDisplay() {
display.value = '';
}
function clearEntry() {
display.value = display.value.slice(0, -1);
}
function backspace() {
clearEntry();
}
function appendFunction(func) {
display.value += func;
}
function calculate() {
try {
// 使用 Function 构造函数比 eval 更安全一些
const result = new Function('return ' + display.value)();
display.value = result;
} catch (error) {
display.value = 'Error';
}
}
function memoryOperation(op) {
const currentValue = parseFloat(display.value) || 0;
switch(op) {
case 'MS': // Memory Store
memory = currentValue;
break;
case 'MR': // Memory Recall
display.value = memory;
break;
case 'M+': // Memory Add
memory += currentValue;
break;
case 'MC': // Memory Clear
memory = 0;
break;
}
}
</script>
</body>
</html>
如何运行
运行方法与方案一完全相同：
- 将代码保存为
scientific-calculator.html文件。 - 用浏览器打开即可。
从 GitHub 下载开源项目
如果您想学习更专业、更复杂的实现，或者直接使用一个功能强大的项目，GitHub 是最佳选择。
推荐项目
-
Calculator (by MDN Web Docs)
- 简介：这是由 Mozilla 开发者网络 (MDN) 提供的一个非常经典的教学项目，代码注释详尽，结构清晰，非常适合想深入学习前端开发的开发者。
- GitHub 地址：https://github.com/mdn/learning-area/tree/main/javascript/building-blocks/calculator
- 特点：功能完整，代码规范，有详细的教程文档。
-
Calculator (by Vitor Luiz)
- 简介：一个功能极其丰富的现代化计算器，支持主题切换、历史记录、科学计算模式等。
- GitHub 地址：https://github.com/vitorluiz/calculator
- 特点：代码量较大，使用了现代前端技术（如 React），界面美观，功能强大。
如何从 GitHub 下载
- 访问 GitHub 页面：打开上面任一项目的 GitHub 链接。
- 找到 "Code" 按钮：在项目页面的右上角，你会看到一个绿色的 Code 按钮。
- 下载方式：
- 直接下载 ZIP：点击 Code 按钮，然后选择 "Download ZIP"，浏览器会下载一个包含所有源代码的压缩包。
- 使用 Git 克隆：如果你熟悉 Git，可以复制仓库的 URL，然后在你的命令行中使用
git clone [URL]命令来下载。
- 解压并运行：
- 下载 ZIP 包后，将其解压到一个文件夹。
- 进入解压后的文件夹,找到
index.html文件。 - 直接用浏览器打开这个
index.html文件即可运行项目。
总结与建议
| 方案 | 优点 | 缺点 | 适合人群 |
|---|---|---|---|
| 方案一 | 代码极简，易于理解，适合快速上手。 | 功能单一，无法处理复杂运算。 | 初学者，想了解基本原理。 |
| 方案二 | 功能较全，包含科学计算和内存功能，代码结构稍好。 | eval/Function 存在潜在安全风险（在完全可控的本地环境中问题不大）。 |
有一定基础的学习者，想扩展功能。 |
| 方案三 | 功能强大、代码规范、有学习文档、界面美观。 | 项目可能较复杂，需要一定的学习成本。 | 进阶学习者或寻找现成解决方案的开发者。 |
给您的建议：
- 如果你是初学者，从方案一开始是最好的选择，它能帮你理解计算器最核心的逻辑。
- 如果你已经掌握了基础，可以尝试方案二，学习如何添加新功能。
- 如果你想做一个功能完善、界面美观的商业级计算器，或者想学习大型项目架构，直接去方案三的 GitHub 下载学习。
