HTML做一个简单的计算器给我代码
时间: 2024-09-19 19:12:42 浏览: 28
要做一个简单的HTML计算器,你可以创建一个基本的表单,结合JavaScript来处理用户输入和计算。下面是一个非常基础的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>简单计算器</title>
</head>
<body>
<h1>简易计算器</h1>
<input type="text" id="display" disabled>
<br>
<div>
<button onclick="appendNumber('7')">7</button>
<button onclick="appendNumber('8')">8</button>
<button onclick="appendNumber('9')">9</button>
<button onclick="calculate()">=</button>
</div>
<div>
<button onclick="appendNumber('+')">+</button>
<button onclick="appendNumber('-')">-</button>
<button onclick="appendNumber('*')">*</button>
<button onclick="appendNumber('/')">/</button>
</div>
<script>
let currentOperand = '';
function appendNumber(num) {
currentOperand += num;
document.getElementById('display').value = currentOperand;
}
function calculate() {
try {
let result = eval(currentOperand);
currentOperand = result.toString();
document.getElementById('display').value = result;
} catch (error) {
// 防止除数为0等错误,这里可以显示错误提示或其他处理
alert("输入有误,请检查运算!");
currentOperand = '';
}
}
</script>
</body>
</html>
```
在这个例子中,我们创建了一个包含数字按钮和操作符按钮的HTML结构,通过`onclick`事件触发JavaScript函数添加数字到当前运算表达式,并在点击等于号时尝试计算结果。注意,这个例子使用了`eval()`函数,这是一种危险的用法,因为它会执行任意字符串作为JavaScript代码,实际项目中应避免直接使用。
阅读全文