html和js实现计算器
时间: 2024-05-13 20:15:17 浏览: 22
下面是一个简单的 HTML 和 JavaScript 计算器实现:
```
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
</head>
<body>
<h1>计算器</h1>
<input type="text" id="result" name="result" readonly>
<br>
<button onclick="clearResult()">清除</button>
<br><br>
<button onclick="addToResult(7)">7</button>
<button onclick="addToResult(8)">8</button>
<button onclick="addToResult(9)">9</button>
<button onclick="addToResult('+')">+</button>
<br>
<button onclick="addToResult(4)">4</button>
<button onclick="addToResult(5)">5</button>
<button onclick="addToResult(6)">6</button>
<button onclick="addToResult('-')">-</button>
<br>
<button onclick="addToResult(1)">1</button>
<button onclick="addToResult(2)">2</button>
<button onclick="addToResult(3)">3</button>
<button onclick="addToResult('*')">*</button>
<br>
<button onclick="addToResult(0)">0</button>
<button onclick="addToResult('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="addToResult('/')">/</button>
<script>
function addToResult(value) {
document.getElementById("result").value += value;
}
function clearResult() {
document.getElementById("result").value = '';
}
function calculate() {
var result = eval(document.getElementById("result").value);
document.getElementById("result").value = result;
}
</script>
</body>
</html>
```
这个计算器包含了数字、运算符和清空结果的按钮。JavaScript 中的 `eval()` 函数用来计算表达式的值,将结果显示在输入框中。