完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简单计算器</title><style>body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f4f4f4;}.calculator {background-color: #fff;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}.calculator input[type="text"] {width: 100%;padding: 10px;margin-bottom: 10px;font-size: 18px;text-align: right;border: 1px solid #ccc;border-radius: 5px;}.calculator .buttons {display: grid;grid-template-columns: repeat(4, 1fr);gap: 10px;}.calculator .buttons button {padding: 20px;font-size: 18px;border: none;border-radius: 5px;background-color: #f1f1f1;cursor: pointer;}.calculator .buttons button:hover {background-color: #ddd;}.calculator .buttons button.operator {background-color: #ff9500;color: white;}.calculator .buttons button.operator:hover {background-color: #e08900;}.calculator .buttons button.equal {background-color: #34c759;color: white;grid-column: span 2;}.calculator .buttons button.equal:hover {background-color: #2da94f;}</style>
</head>
<body><div class="calculator"><input type="text" id="display" disabled><div class="buttons"><button onclick="clearDisplay()">C</button><button onclick="appendToDisplay('/')" class="operator">/</button><button onclick="appendToDisplay('*')" class="operator">*</button><button onclick="deleteLast()">DEL</button><button onclick="appendToDisplay('7')">7</button><button onclick="appendToDisplay('8')">8</button><button onclick="appendToDisplay('9')">9</button><button onclick="appendToDisplay('-')" class="operator">-</button><button onclick="appendToDisplay('4')">4</button><button onclick="appendToDisplay('5')">5</button><button onclick="appendToDisplay('6')">6</button><button onclick="appendToDisplay('+')" class="operator">+</button><button onclick="appendToDisplay('1')">1</button><button onclick="appendToDisplay('2')">2</button><button onclick="appendToDisplay('3')">3</button><button onclick="calculate()" class="equal">=</button><button onclick="appendToDisplay('0')" style="grid-column: span 2;">0</button><button onclick="appendToDisplay('.')">.</button></div>
</div><script>function appendToDisplay(value) {document.getElementById('display').value += value;}function clearDisplay() {document.getElementById('display').value = '';}function deleteLast() {let display = document.getElementById('display');display.value = display.value.slice(0, -1);}function calculate() {let display = document.getElementById('display');try {// 使用 eval 计算表达式,支持运算符优先级display.value = eval(display.value);} catch (e) {display.value = '错误';}}
</script></body>
</html>
在现代生活中,计算器是我们日常工作和学习中不可或缺的工具。无论是进行简单的加减乘除运算,还是处理复杂的数学表达式,计算器都能帮助我们快速得到结果。本文将介绍如何使用HTML、CSS和JavaScript创建一个简单的网页计算器,并解释其实现原理。
1. 项目结构
这个简单的计算器项目主要由三部分组成:
-
HTML:用于构建计算器的基本结构和布局。
-
CSS:用于美化计算器的外观,使其更加用户友好。
-
JavaScript:用于实现计算器的逻辑功能,如输入、删除、清空和计算等。
2. HTML结构
HTML部分定义了计算器的基本结构。我们使用了一个<div>
容器来包裹整个计算器,并在其中放置了一个输入框和一个按钮网格。
<div class="calculator"><input type="text" id="display" disabled><div class="buttons"><button onclick="clearDisplay()">C</button><button onclick="appendToDisplay('/')" class="operator">/</button><button onclick="appendToDisplay('*')" class="operator">*</button><button onclick="deleteLast()">DEL</button><button onclick="appendToDisplay('7')">7</button><button onclick="appendToDisplay('8')">8</button><button onclick="appendToDisplay('9')">9</button><button onclick="appendToDisplay('-')" class="operator">-</button><button onclick="appendToDisplay('4')">4</button><button onclick="appendToDisplay('5')">5</button><button onclick="appendToDisplay('6')">6</button><button onclick="appendToDisplay('+')" class="operator">+</button><button onclick="appendToDisplay('1')">1</button><button onclick="appendToDisplay('2')">2</button><button onclick="appendToDisplay('3')">3</button><button onclick="calculate()" class="equal">=</button><button onclick="appendToDisplay('0')" style="grid-column: span 2;">0</button><button onclick="appendToDisplay('.')">.</button></div>
</div>
-
输入框:
<input type="text" id="display" disabled>
用于显示用户输入和计算结果。disabled
属性确保用户不能直接通过键盘输入。 -
按钮:每个按钮都绑定了
onclick
事件,用于处理用户的点击操作。按钮分为数字按钮、运算符按钮和功能按钮(如清空、删除、等于)。
3. CSS样式
CSS部分用于美化计算器的外观。我们使用了Flexbox布局来使计算器在页面中居中显示,并使用Grid布局来排列按钮。
body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f4f4f4;
}.calculator {background-color: #fff;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}.calculator input[type="text"] {width: 100%;padding: 10px;margin-bottom: 10px;font-size: 18px;text-align: right;border: 1px solid #ccc;border-radius: 5px;
}.calculator .buttons {display: grid;grid-template-columns: repeat(4, 1fr);gap: 10px;
}.calculator .buttons button {padding: 20px;font-size: 18px;border: none;border-radius: 5px;background-color: #f1f1f1;cursor: pointer;
}.calculator .buttons button:hover {background-color: #ddd;
}.calculator .buttons button.operator {background-color: #ff9500;color: white;
}.calculator .buttons button.operator:hover {background-color: #e08900;
}.calculator .buttons button.equal {background-color: #34c759;color: white;grid-column: span 2;
}.calculator .buttons button.equal:hover {background-color: #2da94f;
}
-
居中显示:通过
display: flex
和justify-content: center
、align-items: center
,我们将计算器居中显示在页面上。 -
按钮布局:使用
grid-template-columns: repeat(4, 1fr)
将按钮排列成4列的网格布局。 -
按钮样式:不同类型的按钮(如运算符、等于按钮)有不同的背景颜色和悬停效果,以提高用户体验
4. JavaScript逻辑
JavaScript部分负责处理计算器的逻辑功能。我们定义了四个函数来实现计算器的基本操作:
javascript">function appendToDisplay(value) {document.getElementById('display').value += value;
}function clearDisplay() {document.getElementById('display').value = '';
}function deleteLast() {let display = document.getElementById('display');display.value = display.value.slice(0, -1);
}function calculate() {let display = document.getElementById('display');try {// 使用 eval 计算表达式,支持运算符优先级display.value = eval(display.value);} catch (e) {display.value = '错误';}
}
-
appendToDisplay(value)
:将用户点击的按钮值追加到输入框中。 -
clearDisplay()
:清空输入框中的内容。 -
deleteLast()
:删除输入框中的最后一个字符。 -
calculate()
:使用eval()
函数计算输入框中的表达式,并将结果显示在输入框中。如果表达式无效,则显示“错误”。
5. 总结
通过这个简单的项目,我们学习了如何使用HTML、CSS和JavaScript创建一个功能齐全的网页计算器。这个计算器不仅支持基本的加减乘除运算,还具备清空、删除和错误处理功能。虽然这个计算器相对简单,但它为我们提供了一个良好的起点,可以在此基础上进一步扩展功能,如支持更复杂的数学运算、添加历史记录等。
希望这篇文章能帮助你理解如何构建一个简单的网页计算器,并激发你对前端开发的兴趣!