编程实现一个简易版的网页计算器
时间: 2024-11-03 18:24:11 浏览: 7
Python 编程练习-创建一个简易计算器(英文版)
在JavaScript中,我们可以编写一个简单的网页计算器,基本功能包括加、减、乘、除操作。以下是一个基础的HTML和JavaScript代码示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>简易网页计算器</title>
<style>
#calculator {
width: 200px;
height: 400px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="calculator">
<input type="text" id="display" disabled>
<br><br>
<button onclick="clearDisplay()">C</button>
<button onclick="appendNumber(7)">7</button>
<button onclick="appendNumber(8)">8</button>
<button onclick="appendNumber(9)">9</button>
<button onclick="performOperation('+')">+</button>
<!-- ...重复以上结构添加其他数字按钮和运算符 -->
<button onclick="calculateResult()">=</button>
</div>
<script>
let currentNum = '';
function appendNumber(num) {
currentNum += num;
document.getElementById('display').value = currentNum;
}
function clearDisplay() {
currentNum = '';
document.getElementById('display').value = '';
}
function performOperation(op) {
if (currentNum !== '') {
let result = eval(currentNum + op);
currentNum = result.toString();
document.getElementById('display').value = currentNum;
}
}
function calculateResult() {
// 如果当前显示的是数字而不是算式,直接等于当前值
if (!isNaN(currentNum)) {
document.getElementById('display').value = eval(currentNum);
} else {
// 否则,先计算算式再结果
performOperation('=');
}
}
</script>
</body>
</html>
```
这个例子中,用户通过点击数字按钮输入数字,按下运算符按钮进行计算,最后点击等号按钮得出结果。注意,`eval()`函数用于在运行时执行字符串作为JavaScript代码,这在实际生产环境中可能存在安全风险。
阅读全文