写一个能运行的网页版计算器
时间: 2024-09-14 16:03:59 浏览: 44
js网页版手机计算器.zip
为了创建一个简单的网页版计算器,我们可以使用HTML、CSS以及JavaScript来实现。下面是一个基本的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>简单网页计算器</title>
<style>
#calculator {
width: 200px;
height: 300px;
border: 1px solid black;
padding: 10px;
display: flex;
flex-direction: column;
}
input[type=number], button {
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="calculator">
<input type="number" id="display" disabled>
<br>
<button onclick="clearDisplay()">C</button>
<button onclick="appendNumber('7')">7</button>
<button onclick="appendNumber('8')">8</button>
<!-- 添加更多的数字按钮到此处 -->
<!-- ... -->
<button onclick="calculate()">=</button>
</div>
<script>
let currentNumber = '';
function appendNumber(num) {
currentNumber += num;
document.getElementById('display').value = currentNumber;
}
function clearDisplay() {
currentNumber = '';
document.getElementById('display').value = '';
}
function calculate() {
try {
const result = eval(currentNumber);
currentNumber = result.toString();
document.getElementById('display').value = currentNumber;
} catch (error) {
// 防止用户输入非数字导致错误
clearDisplay();
}
}
</script>
</body>
</html>
```
这个例子创建了一个包含数字按键和等号的简易计算器,可以处理基础的加减乘除运算。当用户点击数字按钮时,会将数字添加到显示框中;点击等号按钮时,会尝试计算当前显示的表达式。
阅读全文