HTML做一个简易计算器的代码
时间: 2024-09-28 13:05:22 浏览: 28
HTML网页上实现的计算器源代码
4星 · 用户满意度95%
HTML本身并不支持直接编写程序或创建复杂的交互式计算器,它主要是用于静态网页布局。但是,你可以结合JavaScript来制作一个简易的在线计算器。下面是一个简单的例子:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<style>
.calculator {
width: 200px;
padding: 15px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="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="calculate()">=</button>
<br>
<button onclick="appendNumber('+')">+</button>
<button onclick="appendNumber('-')">-</button>
<button onclick="appendNumber('*')">*</button>
<button onclick="appendNumber('/')">/</button>
<br>
<button onclick="appendNumber('4')">4</button>
<button onclick="appendNumber('5')">5</button>
<button onclick="appendNumber('6')">6</button>
<button onclick="clearDisplay()">C</button>
<br>
<button onclick="appendNumber('1')">1</button>
<button onclick="appendNumber('2')">2</button>
<button onclick="appendNumber('3')">3</button>
<button onclick="decimal()">.</button>
</div>
<script>
let display = document.getElementById('display');
function appendNumber(num) {
display.value += num;
}
function clearDisplay() {
display.value = '';
}
function calculate() {
try {
display.value = eval(display.value);
} catch (error) {
display.value = "Error";
}
}
function decimal() {
if (display.value.includes('.')) return;
appendNumber('.');
}
</script>
</body>
</html>
```
这个例子中,用户可以点击按钮添加数字、运算符到输入框,然后点击等号计算结果。注意这是一个基础版本,并没有处理除数为零等复杂情况。
阅读全文