做一个计算器HTML代码
时间: 2023-09-21 11:08:02 浏览: 41
以下是一个简单的计算器 HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
text-align: center;
margin-top: 50px;
}
.container {
width: 300px;
margin: auto;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 15px #bbb;
}
input[type=text] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 5px;
box-shadow: 0px 0px 5px #ccc;
font-size: 20px;
text-align: right;
}
input[type=button] {
width: 50%;
padding: 10px;
margin-bottom: 10px;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: #fff;
font-size: 20px;
cursor: pointer;
}
input[type=button]:hover {
background-color: #3e8e41;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<h1>计算器</h1>
<div class="container">
<input type="text" id="result" readonly>
<input type="button" value="1" onclick="addToInput('1')">
<input type="button" value="2" onclick="addToInput('2')">
<input type="button" value="3" onclick="addToInput('3')">
<input type="button" value="+" onclick="addToInput('+')">
<input type="button" value="4" onclick="addToInput('4')">
<input type="button" value="5" onclick="addToInput('5')">
<input type="button" value="6" onclick="addToInput('6')">
<input type="button" value="-" onclick="addToInput('-')">
<input type="button" value="7" onclick="addToInput('7')">
<input type="button" value="8" onclick="addToInput('8')">
<input type="button" value="9" onclick="addToInput('9')">
<input type="button" value="×" onclick="addToInput('*')">
<input type="button" value="C" onclick="clearInput()">
<input type="button" value="0" onclick="addToInput('0')">
<input type="button" value="=" onclick="calculateResult()">
<input type="button" value="÷" onclick="addToInput('/')">
<div class="clear"></div>
</div>
<script>
function addToInput(value) {
document.getElementById('result').value += value;
}
function clearInput() {
document.getElementById('result').value = '';
}
function calculateResult() {
var input = document.getElementById('result').value;
var result = eval(input);
document.getElementById('result').value = result;
}
</script>
</body>
</html>
```
这个计算器包含数字、加减乘除、清除和等于按钮。它使用 JavaScript 的 eval 函数来计算输入的表达式,并将结果显示在文本框中。注意,这个计算器只是一个简单的示例,不适合用于生产环境。