制作简易计算器 用hbuilder代码
时间: 2024-09-29 14:11:45 浏览: 47
简易计算器_html_源码
5星 · 资源好评率100%
制作一个简易计算器,你可以使用HBuilder(DCloud的IDE)创建一个简单的HTML/CSS/JavaScript项目。以下是一个基础示例,我们将创建一个基本的文本输入框和按钮,用户可以输入数字和运算符,然后点击等于按钮计算结果:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>
#calculator {
display: flex;
flex-direction: column;
}
input, button {
margin: 5px;
}
</style>
</head>
<body>
<div id="calculator">
<input type="text" id="display" disabled placeholder="请输入计算表达式...">
<div>
<button onclick="appendNumber(7)">7</button>
<button onclick="appendNumber(8)">8</button>
<button onclick="appendNumber(9)">9</button>
<button onclick="setOperator('+')">+</button>
</div>
<!-- 添加更多按键和操作 -->
<!-- ... -->
<div>
<button onclick="calculate()">=</button>
<button onclick="clearInput()">C</button>
</div>
</div>
<script>
function appendNumber(num) {
var display = document.getElementById('display');
if (display.value !== '') {
display.value += num;
} else {
display.value = num;
}
}
function setOperator(op) {
// 检查是否已经有数字,然后设置操作符
// 如果有,将旧的操作符清除并添加新的
// ...
}
function calculate() {
let expression = document.getElementById('display').value;
// 这里可以使用JavaScript的eval函数或者正则匹配+,-,*,/来解析表达式
// 计算结果并更新显示
// ...
}
function clearInput() {
document.getElementById('display').value = '';
}
</script>
</body>
</html>
```
在这个例子中,你需要自定义`setOperator`函数来处理运算符的添加,并在`calculate`函数中实现基本的数学运算。注意,`eval`函数存在安全风险,这里仅做演示,实际应用中建议使用更安全的方式解析表达式。
阅读全文