简易计算器的HTML代码
时间: 2024-11-09 22:12:31 浏览: 30
简易计算器的HTML代码通常用于创建一个基本的前端界面,用户可以在浏览器中输入数字并执行加减乘除等操作。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<style>
.calculator {
width: 200px;
border: 1px solid #ccc;
padding: 10px;
display: flex;
flex-direction: column;
}
input[type="number"] {
margin-bottom: 5px;
}
button {
width: 50px;
height: 50px;
margin-right: 5px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="calculator">
<input type="number" id="display" disabled>
<button value="+">+</button>
<button value="-">-</button>
<button value="*">*</button>
<button value="/">/</button>
<button onclick="clearInput()">C</button>
<button onclick="calculateResult()">=</button>
</div>
<script>
function clearInput() {
document.getElementById('display').value = '';
}
function calculateResult() {
const numbers = document.querySelectorAll('input[type="number"]');
let result = parseFloat(numbers[0].value);
for (let i = 1; i < numbers.length; i++) {
switch (numbers[i].value) {
case '+':
result += parseFloat(numbers[++i].value);
break;
case '-':
result -= parseFloat(numbers[++i].value);
break;
case '*':
result *= parseFloat(numbers[++i].value);
break;
case '/':
if (numbers[i + 1].value !== '0') {
result /= parseFloat(numbers[++i].value);
} else {
alert("错误:除数不能为零");
return;
}
break;
}
}
document.getElementById('display').value = result;
}
</script>
</body>
</html>
```
在这个例子中,HTML结构包含了输入框、按钮以及一些JavaScript函数,如`clearInput()`清空输入和`calculateResult()`计算结果。
阅读全文