用web制作一个计算器,写出它的代码
时间: 2024-10-16 16:11:32 浏览: 29
C语言计算器代码一个简单的计算器C代码
5星 · 资源好评率100%
创建一个基本的网页计算器,我们可以使用HTML、CSS和JavaScript来实现。这里是一个简单的例子,它包含一个HTML表单用于用户输入数字和操作符,以及JavaScript代码来处理计算:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>简单计算器</title>
<style>
#calculator {
width: 200px;
margin: auto;
padding: 10px;
border: 1px solid black;
box-sizing: border-box;
}
input[type=number] {
width: 100%;
height: 40px;
}
</style>
</head>
<body>
<div id="calculator">
<input type="text" id="display" disabled>
<br><br>
<button onclick="appendNumber(7)">7</button>
<button onclick="appendNumber(8)">8</button>
<button onclick="appendNumber(9)">9</button>
<button onclick="addOperator('+')">+</button>
<!-- 添加更多按钮,包括运算符减号(-)、乘号(*)、除号(/)等 -->
<!-- ... -->
<button onclick="calculate()">=</button>
</div>
<script>
let display = document.getElementById('display');
let currentOperation = '';
function appendNumber(num) {
display.value += num;
}
function addOperator(op) {
if (currentOperation !== '') {
display.value += ' ' + op;
currentOperation = op;
} else {
currentOperation = op;
}
}
function calculate() {
try {
const result = eval(display.value);
display.value = result.toString();
currentOperation = '';
} catch (_) {
// 如果表达式无效,清除当前值
display.value = '错误';
currentOperation = '';
}
}
</script>
</body>
</html>
```
这个示例展示了基础的加法功能。为了添加其他算术运算,你需要复制`addOperator`函数部分,并分别添加减法、乘法和除法对应的按钮及其操作。
阅读全文