js html 简易计算器
时间: 2024-09-23 10:02:42 浏览: 35
JavaScript 和 HTML 结合可以创建一个简单的计算器,通常包含输入数字的按钮、运算符按钮以及显示结果的面板。下面是一个简易的HTML+JavaScript实现步骤:
1. 创建HTML结构:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
</head>
<body>
<input type="text" id="display" readonly>
<div class="button-group">
<button onclick="appendNumber(7)">7</button>
<!-- 添加其他数字0-9的按钮 -->
<button onclick="appendNumber(8)">8</button>
<!-- ... -->
<button onclick="appendOperator('+')">+</button>
<!-- 添加减法、乘法、除法等运算符按钮 -->
</div>
<script src="calculator.js"></script>
</body>
</html>
```
2. 编写JavaScript代码 (calculator.js):
```javascript
let currentNum = '';
function appendNumber(num) {
currentNum += num;
document.getElementById('display').value = currentNum;
}
function appendOperator(op) {
if (currentNum !== '') {
performCalculation(currentNum, op);
currentNum = '';
}
// 具体计算函数
function performCalculation(num, operator) {
switch (operator) {
case '+':
eval(currentNum + operator);
break;
case '-':
case '*':
case '/':
// 实现相应的计算逻辑
let result = /* 根据运算符计算 */;
document.getElementById('display').value = result;
break;
}
}
}
```
在这个例子中,`appendNumber`用于累积数字,`appendOperator`处理运算并更新显示。注意,使用了`eval()`函数来进行简单的算术运算,但在实际项目中,推荐使用更安全的方式,如创建一个真正的数学解析引擎。
阅读全文