创建一个简单的在线计算器是一个很有趣的项目，它可以执行基本的数学运算，如加法、减法、乘法和除法。以下是一个基于HTML、CSS和JavaScript的计算器示例：
<!DOCTYPE html>
<html lang="en">
<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;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: white;
}
.calculator {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
input[type="text"] {
grid-column: span 4;
padding: 10px;
font-size: 18px;
}
input[type="button"] {
padding: 10px;
font-size: 18px;
background-color: #333;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<header>
<h1>简单计算器</h1>
</header>
<div class="container">
<input type="text" id="display" readonly>
<div class="calculator">
<input type="button" value="7" onclick="appendToDisplay('7')">
<input type="button" value="8" onclick="appendToDisplay('8')">
<input type="button" value="9" onclick="appendToDisplay('9')">
<input type="button" value="/" onclick="appendToDisplay('/')">
<input type="button" value="4" onclick="appendToDisplay('4')">
<input type="button" value="5" onclick="appendToDisplay('5')">
<input type="button" value="6" onclick="appendToDisplay('6')">
<input type="button" value="*" onclick="appendToDisplay('*')">
<input type="button" value="1" onclick="appendToDisplay('1')">
<input type="button" value="2" onclick="appendToDisplay('2')">
<input type="button" value="3" onclick="appendToDisplay('3')">
<input type="button" value="-" onclick="appendToDisplay('-')">
<input type="button" value="C" onclick="clearDisplay()">
<input type="button" value="0" onclick="appendToDisplay('0')">
<input type="button" value="=" onclick="calculate()">
<input type="button" value="+" onclick="appendToDisplay('+')">
</div>
</div>
<script>
function appendToDisplay(value) {
document.getElementById('display').value += value;
}
function clearDisplay() {
document.getElementById('display').value = '';
}
function calculate() {
try {
const result = eval（document.getElementById('display').value);
document.getElementById('display').value = result;
} catch (error) {
document.getElementById('display').value = 'Error';
}
}
</script>
</body>
</html>这个简单的计算器包括一个文本输入框和一个按钮网格，用户可以通过点击按钮来输入数字和运算符，并使用等号按钮来执行计算。
要创建你自己的计算器，你可以按照以下步骤进行：
- 复制上面的HTML代码到一个文本编辑器中。
- 根据需要自定义样式，或者添加更多的功能，如小数点支持、括号等。
- 保存文件并命名为
index.html。 - 使用浏览器打开这个HTML文件，查看你的计算器应用。