用HTML5制作简单的计算器
随着网页技术的不断发展，HTML5作为一种强大的标记语言，已广泛应用于各种应用的开发中。今天，我们将使用HTML5制作一个简单的计算器，它不仅能帮助我们进行基本的数学运算，还可以让我们学习到一些代码的基本知识。
项目概述
我们的计算器将支持基本的四则运算：加法、减法、乘法和除法。用户将通过一个简单的界面输入数字和运算符，并得到结果。
整体流程
在开发这个计算器之前，我们先理清楚它的整体流程。下面是我们的计算器设计流程图：
flowchart TD
A[用户输入] --> B{运算符判断}
B -->|加法| C[执行加法]
B -->|减法| D[执行减法]
B -->|乘法| E[执行乘法]
B -->|除法| F[执行除法]
C --> G[显示结果]
D --> G
E --> G
F --> G
代码实现
需要注意的是，我们将使用HTML、CSS和JavaScript三种语言来完成这个项目。以下是主要的代码部分。
1. HTML结构
我们首先创建一个基本的HTML结构，以便为计算器提供界面。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算器</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<input type="text" id="display" disabled>
<div class="buttons">
<button onclick="clearDisplay()">C</button>
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('/')">/</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('*')">*</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('-')">-</button>
<button onclick="appendToDisplay('0')">0</button>
<button onclick="calculate()">=</button>
<button onclick="appendToDisplay('+')">+</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2. CSS样式
接下来，我们来定义一些基本的样式，让计算器看起来漂亮。
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f3f3f3;
font-family: Arial, sans-serif;
}
.calculator {
border: 1px solid #ccc;
padding: 20px;
border-radius: 10px;
background-color: white;
}
#display {
width: 100%;
height: 40px;
font-size: 1.5em;
text-align: right;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
padding: 20px;
font-size: 1.2em;
border: none;
border-radius: 5px;
cursor: pointer;
background-color: #f1f1f1;
transition: background-color 0.3s;
}
button:hover {
background-color: #ddd;
}
3. JavaScript逻辑
最后，我们为计算器提供逻辑功能，实现数值和运算符的处理。
function appendToDisplay(value) {
document.getElementById('display').value += value;
}
function clearDisplay() {
document.getElementById('display').value = '';
}
function calculate() {
let display = document.getElementById('display');
try {
display.value = eval（display.value);
} catch (error) {
display.value = '错误';
}
}
测试和运行
完成以上步骤后，你可以在浏览器中打开 index.html 文件，看到一个简单的计算器界面。点击按钮输入数字和运算符，然后点击“=”按钮查看结果。
总结
通过本次教程，我们使用HTML5制作了一个简单的计算器应用。这不仅让我们了解了如何构建用户界面，还让我们实践了前端开发中的HTML、CSS和JavaScript相结合的技巧。希望这个项目能激发你对前端 Web 开发的进一步探索！在今后的学习中，可以尝试加入更多的功能，比如历史记录、科学计算等。加油！
