html的普通计算器的代码
时间: 2023-12-30 19:04:26 浏览: 86
以下是一个简单的 HTML 计算器代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<style>
#calculator {
width: 300px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 10px;
}
input[type="button"] {
width: 50px;
height: 30px;
margin: 5px;
font-size: 16px;
border: none;
background-color: #eee;
}
input[type="text"] {
width: 100%;
height: 30px;
margin: 5px 0;
font-size: 16px;
text-align: right;
}
</style>
</head>
<body>
<div id="calculator">
<input type="text" name="result" id="result" readonly>
<input type="button" value="1" onclick="calculator('1')">
<input type="button" value="2" onclick="calculator('2')">
<input type="button" value="3" onclick="calculator('3')">
<input type="button" value="+" onclick="calculator('+')">
<br>
<input type="button" value="4" onclick="calculator('4')">
<input type="button" value="5" onclick="calculator('5')">
<input type="button" value="6" onclick="calculator('6')">
<input type="button" value="-" onclick="calculator('-')">
<br>
<input type="button" value="7" onclick="calculator('7')">
<input type="button" value="8" onclick="calculator('8')">
<input type="button" value="9" onclick="calculator('9')">
<input type="button" value="*" onclick="calculator('*')">
<br>
<input type="button" value="0" onclick="calculator('0')">
<input type="button" value="." onclick="calculator('.')">
<input type="button" value="C" onclick="clearResult()">
<input type="button" value="/" onclick="calculator('/')">
<br>
<input type="button" value="=" onclick="calculate()">
</div>
<script>
function calculator(val) {
document.getElementById('result').value += val;
}
function clearResult() {
document.getElementById('result').value = "";
}
function calculate() {
var expression = document.getElementById('result').value;
var result = eval(expression);
document.getElementById('result').value = result;
}
</script>
</body>
</html>
```
这个计算器只支持基本的加、减、乘、除和清空操作,你可以根据自己的需要进行修改和扩展。
阅读全文